Anything that you can do with IDs you can do with classes.
So why is there a ID attribute then?
Yeah the ID is unique but a class can be unique too...
8
- 11I think downvoting w/o comment should be disabled unless you are 10K+MK.– MK.2011-06-21 03:17:52 +00:00Commented Jun 21, 2011 at 3:17
- From wikipedia: The id attribute provides a document-wide unique identifier for an element. This is used to identify the element so that stylesheets can alter its presentational properties, and scripts may alter, animate or delete its contents or presentation. Appended to the URL of the page, it provides a globally unique identifier for the element, typically a sub-section of the page. For example, the ID "Attributes" in en.wikipedia.org/wiki/HTML#AttributesChris Eberle– Chris Eberle2011-06-21 03:18:27 +00:00Commented Jun 21, 2011 at 3:18
- @MK: I can't type that fast, ok...Chris Eberle– Chris Eberle2011-06-21 03:18:44 +00:00Commented Jun 21, 2011 at 3:18
- 3Selecting on a class is typically slower.Sergey Akopov– Sergey Akopov2011-06-21 03:20:38 +00:00Commented Jun 21, 2011 at 3:20
- 3@MK: And why should 10K+ users (like myself) be allowed to downvote with no comment?Asaph– Asaph2011-06-21 03:52:40 +00:00Commented Jun 21, 2011 at 3:52
| Show 3 more comments
6 Answers
The DOM doesn't exist just for the purpose of styling elements - elements can also be manipulated (typically via Javascript), and generally selecting elements by ID is much more efficient than selecting by class.
answered Jun 21, 2011 at 3:17
Christopher Armstrong
7,9812 gold badges28 silver badges28 bronze badges
Comments
Firstly, from the HTML 4.01 Specification Section 7.5.2:
id = name
This attribute assigns a name to an element. This name must be unique in a document.
class = cdata-list
This attribute assigns a class name or set of class names to an element. Any number of elements may be assigned the same class name or names. Multiple class names must be separated by white space characters.
I understand that the spirit of your question is that by intentionally choosing unique class names, you can simulate the functionality given by id attributes, arguably making the id attribute redundant. Well, I can think of at least one thing that can be done only with ids; associating a <label> element with a form element using the for attribute. eg:
<label for="firstname">First Name:<label> <input type="text" id="firstname" name="firstname" value="" /> This is a good practice for accessibility reasons. If you use <label for="id"> with checkbox or radio button elements, you get the added bonus of the labels being clickable. eg:
<label for="male">Male</label> <!-- the word "Male" is clickable --> <input type="radio" id="male" name="sex" value="male" /> <label for="female">Female</label> <!-- the word "Female" is clickable --> <input type="radio" id="female" name="sex" value="female" /> 
1 Comment
Alohci
Along the same lines, some WAI-ARIA properties make use of only the ids. i.e. aria-activedescendant, aria-controls, aria-describedby, aria-flowto, aria-labelledby and aria-owns.
class is for a set of similar elements id is unique to an element. If you want to change all, say, checkboxes, you use class. If you want to do something to a specific checkbox, you use id.
2 Comments
Alex
you can use that ID as a class, so the ID attribute is unnecessary in this case
This tizag article might explain it better. In each standard in HTML, class and id have different functions. For instance, an id is (usually) only utilized once, to denotate a unique element. class is (again, usually) used to define a group of elements.
Anything that you can do with IDs you can do with classes.
Actually no. If you give an element an ID, it can be the target of a link (e.g., http://www.example.com/page#foo takes you to the element with id="foo" on page; this is now preferred over the old <a name="foo"> mechanism.)
So why is there a ID attribute then?
Because they serve entirely different purposes. The example above is just one of the myriad of uses to which a unique identifier for content on a page might be put. Having a unique identifier is important for relationships between things.
Yeah the ID is unique but a class can be unique too...
Can be being the operative phrase. If I tell the browser to look up the element with the "foo" id, once it has found that element it can stop looking. If I tell it I want elements with the class "bar", it has to search the entire DOM to find them.
1 Comment
Alex
the anchor argument is a good one, I didn't think of that :) The +speed doesn't seem that important to me, since the document gets parsed on the client's computer
From http://www.w3.org/TR/html401/struct/global.html#adef-class :
The id attribute has several roles in HTML:
As a style sheet selector.
As a target anchor for hypertext links.
As a means to reference a particular element from a script.
As the name of a declared OBJECT element.
For general purpose processing by user agents (e.g. for identifying fields when extracting data from HTML pages into a database, translating HTML documents into other formats, etc.).
The class attribute, on the other hand, assigns one or more class names to an element; the element may be said to belong to these classes. A class name may be shared by several element instances. The class attribute has several roles in HTML:
As a style sheet selector (when an author wishes to assign style information to a set of elements).
For general purpose processing by user agents.
I can't seem to find a reference for when the class attribute was added to the HTML spec, but I can say from personal experience that I remember the id attribute a lot farther back (particularly for form processing).
