7

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

Alex
  • 66,732
  • 177
  • 439
  • 641
  • 11
    I think downvoting w/o comment should be disabled unless you are 10K+ – MK. Jun 21 '11 at 03: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 http://en.wikipedia.org/wiki/HTML#Attributes – Chris Eberle Jun 21 '11 at 03:18
  • @MK: I can't type that fast, ok... – Chris Eberle Jun 21 '11 at 03:18
  • @MK perhaps you should propose that to http://meta.stackvoverflow.com – insumity Jun 21 '11 at 03:19
  • 3
    Selecting on a class is typically slower. – Sergey Akopov Jun 21 '11 at 03:20
  • possible duplicate of [div class vs id](http://stackoverflow.com/questions/84378/div-class-vs-id) – Matt Ball Jun 21 '11 at 03:29
  • 3
    @MK: And why should 10K+ users (like myself) be allowed to downvote with no comment? – Asaph Jun 21 '11 at 03:52
  • @MK, @Asaph: You might consider voting up this feature request: http://meta.stackoverflow.com/questions/37090/feature-request-downvoter-sends-a-notification-to-all-downvoters-for-your-post – T.J. Crowder Jun 21 '11 at 04:24
  • The point of IDs in CSS is that if you're doing it right and working from general to specific with IDs used sparingly to only override properties that need to be different in specific unique containers, you'll never have a specificity arms race with people throwing down 8 classes to make sure something doesn't bust in a specific area. Lots of IDs in selectors? Dumb. body#some_id div? Incredibly stupid. #side_bar li? Much better than body .main_content .side_bar ul > li to avoid conflict with .main-content > ul > li and I'd rather deal with overriding one ID than a half dozen tags and classes. – Erik Reppen Aug 23 '12 at 23:21

6 Answers6

11

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.

Christopher Armstrong
  • 7,907
  • 2
  • 26
  • 28
8

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" />
Community
  • 1
  • 1
Asaph
  • 159,146
  • 25
  • 197
  • 199
  • 1
    Along the same lines, some [WAI-ARIA properties](http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties) make use of only the ids. i.e. aria-activedescendant, aria-controls, aria-describedby, aria-flowto, aria-labelledby and aria-owns. – Alohci Jun 21 '11 at 08:35
4

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.

MK.
  • 33,605
  • 18
  • 74
  • 111
  • you can use that ID as a class, so the ID attribute is unnecessary in this case – Alex Jun 21 '11 at 03:18
  • 1
    @Alex you want to **identify** the object, not **class** it. You don't put it in a certain class, you give it an identity. This is more semantic. –  Jun 21 '11 at 04:03
3

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.

esqew
  • 42,425
  • 27
  • 92
  • 132
3

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.

T.J. Crowder
  • 1,031,962
  • 187
  • 1,923
  • 1,875
  • 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 – Alex Jun 21 '11 at 04:15
2

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

ETWW-Dave
  • 732
  • 5
  • 8