HTML id Attribute

HTML id Attribute

The HTML id global attribute assigns a unique identifier to an element. An ID can be used to link directly to an element, target it with CSS or JavaScript, and associate elements through other HTML and accessibility attributes.

Syntax

The id attribute is added to an HTML element and assigned an identifier.

<element id="identifier">Content</element>

For example, a heading can be assigned the ID contact.

<h2 id="contact">Contact Information</h2>

Attribute Value

The id attribute must contain at least one character and must not contain ASCII whitespace. Its value must also be unique among the IDs in the element's tree.

<section id="plant-care">...</section>
<div id="product-details">...</div>
<form id="contact-form">...</form>

HTML permits many characters in an ID value, but values that are also convenient CSS identifiers are generally easier to use with CSS selectors and JavaScript selector methods.

Elements That Use the id Attribute

The id attribute is a global attribute and can be specified on any HTML element.

<header id="page-header">...</header>
<main id="main-content">...</main>
<p id="introduction">...</p>
<footer id="page-footer">...</footer>

An element does not need an ID unless it needs to be uniquely identified for linking, styling, scripting, element relationships, or another specific purpose.

IDs Must Be Unique

Each id value must uniquely identify one element within the element's tree. Do not assign the same ID to multiple elements in the same document tree.

<!-- Correct -->
<section id="flowers">...</section>
<section id="vegetables">...</section>

Duplicate IDs can make fragment navigation, CSS selectors, JavaScript, and relationships between elements behave unexpectedly.

<!-- Incorrect: duplicate IDs -->
<section id="products">...</section>
<section id="products">...</section>

Using id with Fragment Links

An ID can identify a destination within a document. A hyperlink containing a fragment identifier uses # followed by the target element's ID.

<a href="#plant-care">Go to Plant Care</a>

<h2 id="plant-care">Plant Care</h2>

When the link is activated, the browser navigates to the element whose ID matches the fragment identifier.

A fragment can also be appended to another page's URL to link directly to an identified element on that page.

<a href="/jump-links.html#section-two">Go to Section Two</a>

Using id with CSS

CSS can target an element by its ID using an ID selector. The selector begins with a # followed by the ID value.

<p id="important-note">Remember to water the plants regularly.</p>

#important-note {
  font-weight: bold;
}

Because an ID identifies a single element, classes are usually more appropriate when the same styles need to be applied to several elements.

Using id with JavaScript

JavaScript can locate an element by its ID using methods such as document.getElementById().

<p id="message">Welcome to the website.</p>

<script>
  const message = document.getElementById("message");
</script>

Elements with IDs can also be selected with methods such as document.querySelector().

const message = document.querySelector("#message");

Although some browsers expose elements with IDs as properties of the global window object, relying on that behavior is discouraged because an ID can conflict with existing or future global properties.

Using id to Associate Elements

Many HTML and accessibility attributes reference another element by its ID. A common example is the for attribute on a <label>, which references the ID of its associated form control.

<label for="email">Email Address:</label>
<input type="email" id="email" name="email">

IDs are also used by attributes such as list, form, headers, and ARIA relationship attributes. Using unique IDs ensures these references identify the intended element.

id vs. class

The id and class attributes both identify elements for purposes such as CSS and JavaScript, but they serve different roles.

<h2 id="featured-product" class="product-heading">Featured Product</h2>
<h2 class="product-heading">New Products</h2>

Use an ID when an element needs a unique identifier. Use a class when several elements need to belong to the same group or share the same styling or behavior.

Common Mistakes

Do not assign the same ID value to multiple elements in the same document tree.

<!-- Incorrect -->
<p id="description">First description.</p>
<p id="description">Second description.</p>

Do not include spaces in an ID value. Unlike class, an id attribute contains a single identifier rather than a space-separated list.

<!-- Incorrect -->
<div id="product details">...</div>

<!-- Correct -->
<div id="product-details">...</div>

Although HTML allows ID values that begin with numbers or contain many punctuation characters, some values require escaping when used as CSS selectors. Choosing simple, descriptive identifiers such as main-content or contact-form makes them easier to use throughout a website.

Browser Support

Baseline: Widely available indicates a feature has been supported by core browsers for at least 30 months. At this stage, the feature is considered stable and safe for most websites to use without needing to worry about compatibility issues or fallbacks, as it is supported by the vast majority of users' devices and browser versions.

The id global attribute is widely supported in current core browsers.

Checking Browser Support

For current browser compatibility information, visit Can I Use? . Search for the HTML element or attribute you want to check. You can also narrow your search by entering an element name and attribute name separated by a colon. Search results can include related HTML features, element attributes, input types, APIs, and other technologies, so select the result that most closely matches the feature you are checking.

Try the id Attribute

The example assigns an ID to a section and links directly to it using a fragment identifier. Change the ID in the editor and update the link's href value to match.

Summary

The HTML id global attribute assigns a unique identifier to an element. The value must contain at least one character, cannot contain ASCII whitespace, and must be unique among IDs in the element's tree. IDs are commonly used for fragment links, CSS selectors, JavaScript, form relationships, and accessibility references.