After reading up on the use of class and id, I really can not find anything that gives a reason/benefit of using id. With everything I tried, class worked just as good, so now I’m wondering why not always simply use class.
Is there anything I missed where id offers a benefit over class?
Thanks Techie, I’ll have a read of that.
There are also common design patterns that are used.
For example, forms have an id attribute added to them, to provide a handy way for scripts to access their named elements.
<form id="register">
<p><label>First name: <input type="text" name="firstname"></label></p>
...
</form>
That way a script can easily access the form elements, with:
var form = document.getElementById('register');
form.onchange = function () {
var form = this,
firstName = form.elements.firstname;
// do stuff with firstName.value
};
[FONT=verdana]My understanding is that ID is supposed to identify an element that’s unique within the page. A given ID will occur at most once in the page, whereas a given class can occur as many times as needed.
Mike[/FONT]
The class selector allows us to label related part of a HTML document. On the other hand, an id selector can be used to target individual elements. If you’re still confused you may want to read this post.
Aside from ALL that has been said so far; an ID may also add a functionality hook for .js or serve to identify an input on a form, as in <label for=“IDname”><input type=‘text’ id=‘IDname’ name='IDname> You MUST have that ID to link with the for attribute on the label.
Also serve as fragments. That is you can direct a link to an ID! <a href=‘#IDname’>Jumps to IDname </a>
That only applies if you’re supporting the now dead IE6 web browser which fails to understand implicit label association.
Explicit label association:
<label for="firstname">First name:</label> <input type="text" id="firstname" name="firstname">
<label for="lastname">Last name:</label> <input type="text" id="lastname" name="lastname">
Implicit label association:
<label>First name: <input type="text" name="firstname"></label>
<label>Last name: <input type="text" name="lastname"></label>
Some reasons why I prefer to use implicit association are:
- IE6 is dead. Let it lie
- It results in simpler HTML code that is easier to read
- The “side-effect” of explicit association is lots more ID attributes scattered throughout your forms
Also, the potential loss of not using explicit association is that people using the IE6 web browser won’t be able to click on the text to select a form element, they will have to click on the form element instead, which I am okay with given the better maintainability that is found from using implicit association instead.
Actaully, explicit label association doesnt seem to work on my MAC safari and FF. 
I always avoid wrapping labels around the form controls as it has been documented to cause quite severe accessibility problems. Whether or not that is still true today I don’t know but once you’ve learned a habit it sticks.
Another downside of wrapping the label is that you lose control over styling the text as you have no unique element to target and authors end up inserting a span which defeats the original purpose of that structure.
Of course both methods are valid either way.
A class can be used several times, while ID can be used only once. ID is a unique identifier to an element.
Yes, I know that. The question was not what the deifinition is, but to give an example of a situation where the use of ID has a distinct advantage over the use of class.
So far, it only seems to be with the use of input functions.
And for internal links. And when you want to increase the specificity of a rule.