Why do IDs exist?

Question

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...

Answer 1

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.

Answer 2

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" />

Answer 3

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.

Answer 4

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.

Answer 5

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.

Answer 6

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).