References

Beginner-friendly references for web development, with live, editable examples.

The HTML id attribute

Global attribute Works on every element All modern browsers Updated
Quick answer

The HTML id attribute gives an element a unique identifier within the page. It is used to target the element from CSS (#id), grab it in JavaScript (getElementById), link to it with a URL fragment (#id), and connect labels and ARIA references. It is a global attribute.

Overview

The id attribute assigns a unique identifier to an element — no two elements on the same page may share the same id. It is the most direct way to point CSS, JavaScript, links and accessibility features at one specific element.

In CSS an id is matched with a hash (#header { }). In JavaScript it powers document.getElementById('header') and querySelector('#header'). As a URL fragment it becomes a scroll target (page.html#header), and it is the glue that connects a <label for> to its field and ARIA attributes like aria-labelledby and aria-describedby to their targets.

Unlike class, an id is unique and carries higher CSS specificity, so reserve it for single, unique hooks rather than for styling many elements.

Syntax

<h2 id="pricing">Pricing</h2>

<!-- Link that scrolls to it -->
<a href="#pricing">Jump to pricing</a>

<!-- Targeted from CSS / JavaScript -->
#pricing { scroll-margin-top: 80px; }
document.getElementById('pricing');

Values

Value
A unique, space-free identifier (case-sensitive). Start it with a letter.

Example

Live example 
<h2 id="features">Features</h2>
<a href="#features">Jump to the Features heading</a>

Best practices

  • Keep every id unique within the page — duplicates silently break scripts, links and ARIA.
  • Start ids with a letter and avoid spaces so they work in CSS selectors and querySelector without escaping.
  • Use ids for in-page links, <label for>, ARIA references and single JavaScript hooks; use a class when you want to style many elements.
  • Add scroll-margin-top to id targets so they are not hidden behind sticky headers when linked to.
  • Keep ids stable — changing one breaks any bookmark, link or script that points at it.

Accessibility

Ids are essential plumbing for accessible interfaces: <label for="id"> ties a label to its control, and ARIA attributes such as aria-labelledby, aria-describedby and aria-controls all reference elements by their id.

  • Because these relationships rely on ids being unique, a duplicate id can make a label or description point at the wrong element for screen-reader users.
  • Ids also enable "skip to content" links, which let keyboard users bypass repeated navigation.

Frequently asked questions

What is the HTML id attribute?
It assigns a unique identifier to an element so CSS, JavaScript, URL fragments and ARIA can reference that one element.
What is the difference between id and class?
An id must be unique on the page and is matched in CSS with #name; a class can be reused on many elements and is matched with .name. Use ids for single hooks and links, classes for shared styling.
Can two elements have the same id?
No. Ids must be unique within a document. Duplicates break getElementById, fragment links and ARIA references, and are invalid HTML.
What characters are allowed in an id?
Any non-empty string without spaces. For trouble-free CSS and JavaScript, start with a letter and use only letters, digits, hyphens and underscores.
How do I link to an id on the page?
Use a fragment link: <a href="#section"> scrolls to the element with id="section". The same works across pages with page.html#section.
hidden inert