id (HTML attribute)
Example
The span element in this example
may be referred to by the unique identifier
"thisspan":
<span id="thisspan">A uniquely identifiable element.</span>
Description
Provides a unique identifier for
this element within the document. This may be used by an a element to create a hyperlink to
this particular element.
This identifier may also be used in
Cascading Style Sheets (CSS) code as a hook 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.
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
| IE | 5.5 | Full |
|---|---|---|
| 6.0 | Full | |
| 7.0 | Full | |
| Firefox | 1.0 | Full |
| 1.5 | Full | |
| 2.0 | Full | |
| Safari | 1.3 | Full |
| 2.0 | Full | |
| 3.0 | Full | |
| Opera | 9.2 | Full |
| 9.5 | Full |
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).
User-contributed notes
Add a note
To post a note on this topic, please log in with your SitePoint username and password. If you don't have an account yet, you can create a new account for free.

