What Is the ID Attribute?

An ID attribute calls out a specific section of a web page

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 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'll style 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 target precise locations in your web documents by pointing to the ID at the end of the URL. Add the id to the end of the page URL, preceded by a hash mark. Link to these anchors with the page itself by adding the hash tag and the ID name in the href attribute for the element. For example, for a division with an ID of contact, link to it on that page with #contact.
  • A reference for scripts: If you write any Javascript functions, use the ID attribute so that you can make changes to the precise element on the page with your scripts.
  • Other processing: The id supports processing within your web documents in whatever way you need. For example, you might extract the HTML into a database and use the ID attribute to identify fields.

Rules for Using the ID Attribute

Ensure your ID attributes conform to these three standards:

  • 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.

Using the ID Attribute

After you identify a unique element of your web site, use style sheets to style just that one element.

For example, to identify an ID titled contact, use either of these forms:

div#contact { background: #0cf;} 
#contact { background: #0cf;}

The first sample targets a division with an ID attribute of contact. The second one still targets the element with an ID of contact, it just wouldn't stipulate that it's a division. The end result of the styling would be exactly the same.

You can also link to that specific element without adding any tags.

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. Using 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.

Format
mla apa chicago
Your Citation
Kyrnin, Jennifer. "What Is the ID Attribute?" ThoughtCo, Sep. 30, 2021, thoughtco.com/what-is-the-id-attribute-3468186. Kyrnin, Jennifer. (2021, September 30). What Is the ID Attribute? Retrieved from https://www.thoughtco.com/what-is-the-id-attribute-3468186 Kyrnin, Jennifer. "What Is the ID Attribute?" ThoughtCo. https://www.thoughtco.com/what-is-the-id-attribute-3468186 (accessed March 19, 2024).