id
HTML id Attribute: The Complete Authoritative Guide for 2026
The id attribute is one of the most fundamental yet most misunderstood elements of HTML. Despite its simplicity, misuse of id is responsible for a significant portion of accessibility failures, performance bottlenecks, and JavaScript fragility in production applications. This guide provides a rigorous, data-backed analysis of how id works across browsers, frameworks, and rendering engines — and how to use it correctly at scale.
Key Takeaways
idvalues must be unique within a document — the DOM specification enforces this, and violating it causes unpredictable selector behavior across all browsers.- CSS specificity:
idscores 100, making it the dominant selector weight; overusingidselectors creates unmaintainable style cascades. idis globally exposed onwindowin HTML parsing mode, creating naming collisions with JavaScript variables — a silent source of bugs in large codebases.- For React and component-based architectures,
idshould be avoided for styling and reserved exclusively for accessibility landmarks, anchor links, and form association. - The
for/idpairing remains the only standards-compliant method for associating labels with form controls, directly impacting form accessibility scores.
What Is the id Attribute?
The id attribute assigns a unique identifier to a single HTML element within a document. Defined in the HTML Living Standard, it serves three primary purposes:
- DOM addressing — enabling JavaScript methods like
document.getElementById()andquerySelector('#id')to locate elements precisely. - CSS targeting — providing the highest-specificity selector mechanism available in the cascade.
- Accessibility anchoring — powering
aria-labelledby,aria-describedby,forattribute associations, and fragment URL navigation.
Unlike the class attribute, which can be shared across any number of elements, id is constrained by the uniqueness invariant: no two elements in a single document may share the same id value. Browsers do not throw parse errors for duplicate id values, but behavior diverges across query methods, creating a stealth quality defect.
Semantic Specification and DOM Behavior
HTML vs XHTML Parsing Differences
The handling of id values diverges between HTML and XHTML/XML parsing modes. In HTML parsing, the browser's tokenizer applies case folding to id values, normalizing them to lowercase before insertion into the DOM. In XHTML, case is preserved. This distinction matters when the same document is served under different Content-Type headers.
| Parser Mode | Case Handling | Global window Exposure |
Duplicate Tolerance |
|---|---|---|---|
text/html (HTML5) |
Lowercased automatically | Yes — global property | Silently accepted; undefined query result |
application/xhtml+xml |
Preserved as-is | No — DOM-only property | Silently accepted; first-match wins |
| XML / SVG inline | Preserved as-is | No | Per spec: not allowed, validator errors |
| MathML inline | Preserved as-is | No | Per spec: not allowed |
The HTMLElement.id Property
Every HTMLElement instance exposes an id property through the IDL interface. Setting element.id = 'new-value' triggers an immediate update to the serialized attribute and any active CSS rules or event bindings that reference the old value. However, the global window property created during HTML parsing does not update automatically — a well-documented footgun in dynamic applications.
CSS Specificity and the Cascade
Why id Selectors Dominate class Selectors
CSS specificity is calculated as a four-tuple (inline, id, class, element). An id selector contributes (0, 1, 0, 0), while a class selector contributes (0, 0, 1, 0). Because specificity comparison is lexicographic — higher-order components are never overridden by lower-order ones — a single #id selector always wins against any number of .class selectors combined.