Description

The id attribute provides a unique identifier for an element within the document. It may be used by an a element to create a hyperlink to this particular element.

This identifier may also be used in CSS code as a hook that can be used for styling purposes, or by JavaScript code (via the Document Object Model, or DOM) to make changes or add behavior to the element by referencing its unique id.

Note that the id attribute cannot be applied to the following elements:

• base
• head
• html
• meta
• script
• style
• title

Value

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

The id attribute value must begin with a letter in the roman alphabet (a–z or A–Z); this 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 to be separate and uniquely identifiable elements on the same web page.

Compatibility

The id attribute can be applied to almost anything (although it can’t be applied to the html element in HTML4), but on its own, it doesn’t affect the display of any element on a web page. Compatibility issues relate mostly to the way in which JavaScript is used to access the referenced element (this depends on differences in the ways browsers interpret the Document Object Model) and the support that different browsers provide for CSS, particularly around the topic of specificity.

One notable compatibility problem with the use of the id attribute arises when it’s used to identify a link destination on the current 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 to the section identified on the page; it requires another a element as an anchor. What often results is this kind of approach:

<a href="#section3">Jump to section 3</a>
⋮
<h2><a href="#section3" name="section3"
    id="section3"></a>Section 3</h2>

As you can see, both the name and id attributes are used (the href is repeated in order to fix a keyboard navigation bug in IE; without it, activating that link with the keyboard won’t set the focus at the correct part of the page).