What is the ID Attribute?

Unique Identifiers within Web Pages

According to the W3C, the ID attribute in HTML is:

a unique identifier for the element

This is a very simple description of a very powerful attribute. The ID attribute can performs several actions for Web pages:

  • A style sheet selector - This is the function most people use the ID attribute for. Because they are unique, you can be sure you'll be styling just the one item on your Web page when you style using an ID property. The downside to using an ID for styling purposes is that it has a very high level of specificity, which can make it very challenging if you need to override a style for some reason later in a stylesheet. Because of this, current Web practices lean towards using classes and class selectors in place of IDs and ID selectors for general styling purposes.
     
  • Named anchors for linking to - Web browsers allow you to target precise locations in your Web documents by pointing to the ID at the end of the URL. You simply add the id to the end of the page URL, preceded by a pound-sign (#). You can also link to these anchors with the page itself by adding the ound-sign (#) and the ID name in the href attribute for the a element. For instance, if you have a division with an ID of contact, you could link to it on that page with this:

    <a href="#contact">This is the link text</a>
     
  • A reference for scripts - If you write any Javascript functions, you will want to use the ID attribute so that you can make changes to the precise element on the page with your scripts.
     
  • Other processing - The id allows you to process your Web documents in whatever way you need to. For example, you might extract the HTML into a database, and the ID attribute identifies fields.

Rules for Using the ID Attribute

There are a few rules you must follow to have a valid document that uses the id attribute anywhere in the document:

  • The ID must start with a letter (a-z or A-Z)
  • All subsequent characters can be letters, numbers (0-9), hyphens (-), underscores (_), colons (:), and periods (.).
  • Each ID must be unique within the document. Why?

Using the ID Attribute

Once you have identified a unique element of your Web site, you can use style sheets to style just that one element:

<div id="contact-section">
  <h3>Contact Us</h3>
  <p>There is some text content here</p>
</div>
div#contact-section { background: #0cf;} 

-or just-

#contact-section { background: #0cf;}

Either of those two selectors would work. The first one (div#contact-section) would target a division with an ID attribute of "contact-section". The second one (#contact-section) would still target the element with an ID of "contact-section", it just wouldn't know that what it is looking for is a division. The end result of the styling would be exactly the same.

You can also link to that specific element without adding any <a> tags:

<a href="#contact-section">Link to the contact information</a>

Reference that paragraph in your scripts with the "getElementById" JavaScript method:

document.getElementById("contact-section")

ID attributes are still very useful in HTML, even though class selectors have replaced them for most general styling purposes. The ability to use the ID attribute as a hook for styles, while also using them as anchors for links or targets for scripts, means that they still have an important place in Web design today.

Edited by Jeremy Girard