So, I've read recently some posts about HTML5 best practices and all of them have the following practice:
"Use id attribute instead of name attribute"
Is that right? I mean, how am I going to handle forms in PHP, for example, if not by inputs' name attribute?
Look here for reference:
Difference between id and name attributes in HTML
https://teamtreehouse.com/community/what-is-the-difference-between-id-and-name-attributes-in-form-elements
Names can be used for more elements, while ids are unique. This helps with styling multiple elements without repeating your css code.
Long story short, id is not meant for naming form elements.
You use id to make it easier for CSS or JavaScript to handle that one particular element with the unique id.
Whether you're using CSS or JavaScript/jQuery with your forms, an ID is handy for most inputs/elements because you can reference them like easily. Remember, ID's are unique:
<div id="example1"></div>
If you have an element like I mentioned above, you can always call it later by doing this:
var x = document.getElementById("example1").id;
along with many other ways.
Names can sometimes be tied to a variety of elements on the page, whereas there will always only by one item with that particular ID.
Related
Why would you use "div class" instead of "div id"
Usually when I name a div I use "id" to give a name to an element and with set parameters. I really only use "class" to give it special characteristics. For my example .
However, I have a professor who will "class" to identify all his divs. For example prof example .
Can someone explain the benefit of something like "div class" instead of "div id".
<div class="some_class">
<p>This can be used any number of times on one HTML page</p>
</div>
<div id="some_id">
<p>This CAN be used multiple times with the same ID,
but it is invalid code, as a specific ID should
only be used ONCE per html page</p>
</div>
Here's an older yet still good explanation.
ID are unique for the page, so it's better for identification.
Class aren't unique and are supposed to be to group similar style things together.
Said otherwise, if you need to apply something to THAT SPECIFIC div, you should call it by the id, because it will take priority over other CSS styles that may affect it.
Classes will allow you to set some common ground in your style so you can use similar fonts or sizes in different kind of elements.
If you are using Javascript there is a big advantage of using classnames to identify elements instead of id's.
Giving an id to an element also creates a global javascript variable with the same name. See Do DOM tree elements with ids become global variables? for more about that behaviour.
Having such implicitly created variables is at best confusing, and at worst leading to hard to find errors.
I always thought the standard way to specify a fragment identifier is by <a name="foo"></a>.
go to foo
<a name="foo"></a> <!-- obsolete method, it seems -->
<p>some content under that anchor with name</p>
But it seems like this is the old way, and the new way is using an id, like this:
go to bar
<p id="bar">some content under that p with id</p>
In fact, the W3C validator says that name is obsolete for the <a> element. So are there 2 ways to jump to the fragment identifier but 1 of them is obsolete? (And when did that happen?)
(there are other questions about the difference between id and name, but this one is about fragment identifier)
So are there 2 ways to jump to the fragment identifier but 1 of them is obsolete?
There are two ways to identify a fragment.
(There are also two ways to jump to one, since you can do it with a URL or write a pile of JavaScript to scroll the page).
And when did that happen?
id was introduced in 1996 when HTML 4 came out. It effectively obsoleted the name attribute for anchors.
name was made officially obsolete in HTML 5 in 2014 (or in Living HTML on some date that I'm not going to try to figure out).
Yes there are two ways to jump to a fragment identifier and both aren't obsolete ( except a element).
That's rules applied to all HTML 5 elements other than a (because in a hasn't name attribute in HTML5).
So shortly it's obsolete to idenfity name attribute as fragment idenitifier for a element as that's attribute depricated since HTML4.
Flow of accessing fragment from HTML5 Specification:
If there is an element in the DOM that has
an ID exactly equal to fragid, then the first such element in tree
order is the indicated part of the document; stop the algorithm here.
If there is an a element in the DOM that has a name attribute whose
value is exactly equal to fragid, then the first such element in tree
order is the indicated part of the document; stop the algorithm here.
Otherwise, there is no indicated part of the document.
Both ways of doing fragment identifiers work.
Using id="fragment" is the newer, recommended way of jumping to fragments in HTML. It was introduced with HTML4, and works basically everywhere (I just verified this with IE5).
<a name="fragment">, the older way, still works, but is obsolete since HTML5.
Answer to your question: Yes, There are two ways to identify a fragment and one is obsolete.
What is Fragment Identifiers ?
Fragment identifiers for text/plain.
URIs refer to a location in the same resource. This kind of URI starts with "#" followed by an anchor identifier (called the fragment identifier).
Fragment Identifier using JS like below.
location.replace('#middle');
More information on the name attribute.
Basically, the name attribute has been deprecated (obsolete in HTML5-speak) for just about everything except for form elements. Forms retain them as the method of identifying data, and it is the name plus the value property which is sent back to the server. (The id in form elements is used for attaching label elements, and has nothing to do with the actual data).
There is a fundamental weakness in the name attribute, which the id attribute addresses: the name attribute is not required to be unique. This is OK for forms where you can have multiple elements with the same name, but unsuitable for the rest of the document where you are trying to uniquely identify an element.
The id attribute was specifically required to be unique, which makes it better for identifying a link target, among other things. CSS is pretty relaxed about applying styles to multiple elements with the same id, but JavaScript is more strict about this requirement. And, of course, you can’t have a practical link target if you can’t guarantee uniqueness.
This question already has answers here:
Can an HTML element have multiple ids?
(18 answers)
Closed 8 years ago.
Needed to know if an HTML element can have multiple attributes of ID's, for instance :
<input type="text" id="identifier1" id="selector1" />
As I needed to clarify this statement mentioned about selectors at W3 website.
If an element has multiple ID attributes, all of them must be treated
as IDs for that element for the purposes of the ID selector. Such a
situation could be reached using mixtures of xml:id, DOM3 Core, XML
DTDs, and namespace-specific knowledge.
The Possible duplicates which people are referring, states question for this syntax
<input type="text" id="identifier1 selector1" />
which is different than syntax that I am asking.
Needed to know if an HTML element can have multiple attributes of ID's
Short answer? No because the browser will only render the first one.
See this Fiddle, I can only target it in CSS using the first id that appears in the DOM. Try changing that CSS selector to use the second id, it won't work.
That's because it seems like the second ID is being disregarded by the browser, as this is the output HTML:
<input type="text" id="identifier1">
If you really need additional identifiers on an element, you should think about using either multiple class names or data attributes to correspond to additional data.
Needed to know if an HTML element can have multiple attributes of ID's
No. No element in HTML may have more then one instance of a given attribute.
As I needed to clarify this statement
Note the last sentence in that statement.
Also note that the CSS idea of an "ID attribute" is not "An attribute with the name id". Also quoting from that document:
Document languages may contain attributes that are declared to be of type ID
Only the id attribute is an ID type in HTML.
No, even if you specify multiple ids, the first encountered id attribute is used.
No ID can not be same for html elements, but the Classes are to use for multiple elements, and one element may have multiple classes
No, because an attribute must not be repeated in tag. This is a general rule in HTML, not limited to the id attribute. For nominally SGML-based versions of HTML and for XHTML, this follows from general SGML and XML rules. For HTML serialized HTML5, see HTML5 CR, 8.1.2.3 Attributes.
It’s difficult to see why you would use duplicate id attributes, so I can’t suggest a workaround. In general, for any normal use of the id attribute, one attribute per element is sufficient.
No. Element IDs should be unique within the entire document.
Trying to learn html/css. I've been looking at the html & css files of a couple different websites that have something along the line of:
<span class="mytest anothertest">some text goes here</span>
I understand the "mytest" part but what does "anothertest" do? There's no reference to that anywhere in their css or html files.
anothertest is just another class like mytest. You can apply more than one to an element.
There are several possible reasons for the presence of a class name in a class attribute value. Using the class in page stylesheets is probably most widely known, but not the only one:
The class name can be used in JavaScript in order to process a set of elements conveniently. (Using document.getElementsByClass is one way to achieve this; another way is to use jQuery; and you could even hand-code it rather simply.)
Designated class names are used in some metadata systems, such as microformats. Some search engines recognize such names and use them to provide semantic searching (though this approach probably loses to microdata, which uses different attributes).
A class name can be used in a user style sheet, e.g. by a developer who wishes to do some testing. This could well be the case if the class name is literally “anothertest.”
The name might be there to allow future development, e.g. so that elements of a class will be or may be styled in some future version. The designers might have ideas on styling but they haven’t decided on it—they just want it to be easy when they are ready.
It could be just a holdover. It was a class that had some use, but things changed. There was really no particular reason to remove it.
This is a very good question. It involved the difference between id and class.
ID
An ID placed on an element, is a unique identifier for that element. An element may only have one ID, and only one of the same ID may exist on a page. So for instance, the following examples are not possible.
<a id="someid anotherid">Multiple IDs - Wrong</a>
<a id="someid"><span id="someid">Same ID twice - Wrong</span></a>
Class
A class name however, is the exact opposite. An element may have several class names, and the same class name may appear multiple times on a page. Like so:
<a class="someclass anotherclass">Multiple Classes - Correct</a>
<a class="someclass"><span class="someclass">Same Class twice - correct</span></a>
In short, the syntax displayed in the question is simply having 2 class names on one element, which is perfectly acceptable.
Class name are also used to easily select elements in the page with JavaScript. You can use the getElementsByClassName method to access them or using your favorite CSS selector library (ex.: Sizzle) if you need compatibility for older browser.
So I just need a reminder,
Every element can only have 1 id, but multiple classes are possible,
But what if I would like to have 2 ways to uniquely identify an object without classes?
I cant remember the name of it, something like Tagname, that can be used in addition to ID.
And how would you identify this object in jQuery?
For classes it is: $('.class'), for ID's it is $('#id') but what about this thing that I am vaguely describing?
Taylor
I cant remember the name of it,
something like Tagname, that can be
used in addition to ID.
You might be thinking of GetElementsByTagName() but that will return a collection:
https://developer.mozilla.org/en/DOM/element.getElementsByTagName.
You can use arbitrary attributes in any modern browser (jQuery does this behind the scenes). So you can put whatever attribute you want on an element and locate it using a jQuery attribute selector (as #Dave pointed out in his answer).
<div myAttribute="foo"></div>
<script>
var element = $("div[myAttribute='foo']"); // matches all divs with "myAttribute" set
</script>
There are many options: http://api.jquery.com/category/selectors/
Just use the "name" attribute:
<div id="something" name="something"></div>
Then reference it by the id like usual, or by the name like this:
$('[name="something"]')
Info on on this selector here.