What Is the ID Attribute?

Unique Identifiers

HTML code displaying various standard HTML elements
kr7ysztof / Getty Images

According to the W3C, the ID attribute in HTML is a unique identifier for the element. It provides a way to identify an area of a web page for CSS styles, anchor links, and targets for scripts.

What Is the ID Attribute Used For?

The ID attribute can perform 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 toward using classes and class selectors in place of IDs and ID selectors for general styling purposes.
  • Named anchors for linking toweb 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 pound-sign (#) and the ID name in the href attribute for the element. For instance, if you have a division with an ID of contact, you could link to it on that page with #contact.
  • 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.

Contact Us

There is some text content here

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 (#contact-section) without adding any tags.

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


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.