Value

The most important aspect of the id attribute is that it must be absolutely unique. Unlike the class attribute, which may have the same value applied to many elements within a given page, an id applied to an element must not match an id used anywhere else on the same page.

The id attribute value can only begin with a letter in the Roman alphabet (a-z or A-Z); it can be followed by any combination of letters (a-z or A-Z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods ("."). The id value is case-sensitive, thus <span id=”me”>This is me</span> and <span id=”ME”>This is me</a> would be considered as separate and uniquely identifiable elements on the same web page.

Compatibility

The id attribute can be applied to almost anything (it cannot be applied to the html element in HTML4), but does not, on its own, affect the display of any element on a web page. Compatibility issues are mostly related to the way in which JavaScript is being used to access the referenced element (for example differences between browsers and the Document Object Model) and the different browsers’ support for CSS (particularly around the topic of specificity).

One notable compatibility problem with the use of the id attribute is when used to identify a link destination on the same page:

<a href=”#section3”>Jump to section 3</a>
…
<h2 id=“section3”>Section 3</h2>

Internet Explorer will not allow the user to activate the link to jump the section identified on the page and requires another a element as an anchor. What often happens is the ‘belt-and-braces’ approach:

<a href=”#section3”>Jump to section 3</a>
…
<h2><a href=“#section3” name=”section3” id=”section3”></a>Section 3</h2>

Both the name and id attributes are used (the href is repeated to fix a keyboard navigation bug in IE; without it, activating that link with the keyboard will not set the focus at the correct part of the page).