the id attribute

Working up to a post about css specificity, I thought it would be useful to go through the core basics first. And as css hooks itself mostly to classes and ids, they seemed like a good place to start off. Both id and class attributes are hmtl attributes which can be easily added to most html elements in a document. This makes usage very easy, as you can simply add id="" or class="" to the html element you want to define.

But let's begin with the id attribute and take a look where all semantic research should start. The w3c specification tells us the following:

This attribute assigns a name to an element. This name must be unique in a document.

The w3c specs can be quite hard to understand sometimes, but in this case the function of the id attribute is clearly described. It is used to single out one element within a document. This means basically two things:

  1. 1. The value of an id must be unique within a document
  2. 2. The value of an id must be singular, no composite ids can be used within html

As easy and clear as this may sound, there is one small pitfall left in the w3c specification. The spec states that an id should be unique within a document, but for practical purposes this should probably be made a little stricter.

So what's its function

The id attribute should be used for identifying elements within a document. Beyond that, the reason for identification is not all that important. It can be used to hook javascript or css, as a link anchor or to get information after a form post. And who knows what the future will bring. In the end, all these actions share the same basic concept. Do something with 1 element and 1 element only. And so that element should be unambiguously defined.

Important note is to make sure you structure your document in a way that makes it possible for anyone to reach whatever element he wants to reach. Remember that a project is not yours alone, and that requirements might change at any time. It's good to anticipate such problems by carefully putting ids as a solid base to work from.

"Most html elements" you said ?

The w3c isn't very clear on this point, but luckily w3schools is happy to help us out:

Not valid in base, head, html, meta, param, script, style, and title elements.

What this basically means is that you can use the id attribute anywhere within the body of your document (body element included) with the exception of the param tag and the script tag. No great losses there.

Being true to the semantic meaning

One small problem with the id attribute is the lenient behavior of the elements hooking themselves to ids. For example, css doesn't really care if you've declared two identical ids within the same document. It will style them both all the same. Javascript will give you the first id in sequence, the anchor link shows a similar behavior. So it's perfectly possible to just go ahead and apply multiple identical ids within one document. Of course it's not very future proof, but for now it will give you little problems apart from not validating.

Still, using ids in this way is rather obsolete as there are other elements (cfr. the class attribute) that can be used just as easily and will give you the desired result (although for anchors and form elements, the id really is the preferred attribute). In the end it's better to keep to the semantic meaning of the attribute, if anything it will keep your documents clear to read and interpret for others.

How to avoid further abuse of the id attribute

Which leaves us with one little issue. The w3c clearly states that an id should be unique within a single document, but what about using ids across documents? While ids can be safely used across multiple pages (or throughout a whole website) there are some best practices to follow. When using an id across a site it's good to make sure it's always used for the same purpose (or on the same element).

It's perfectly legal to have one page with <body id="contact"> and to have another page with a <form id="contact">. But when using ids this way, it's bound to cause you trouble someday. For example, if a javascript is included in the header that works on id="contact you could be in for a serious surprise.

Rounding up

Use ids for their intended purpose. Uniquely identify one element within one web document or across related web documents using an id. And try to do it without all those javascript and css requirements in mind. If you do it well, hooking up styling or behavior to an element will not be any problem afterwards.