Error Duplicate id attribute

Why id values must be unique per document, and how duplicates silently break CSS selectors, JavaScript, and anchor links.

The validator flags any id value that appears on more than one element in the document.

Example

<!-- Wrong: id used twice -->
<div id="card">First</div>
<div id="card">Second</div>

<!-- Right: use classes for repeated elements -->
<div class="card">First</div>
<div class="card">Second</div>

Why it matters

The HTML spec requires id to be unique within its document precisely because so much depends on that uniqueness holding: document.getElementById() and querySelector('#id') both return only the first match, silently ignoring the rest; a CSS rule for #card applies to the first element found, which may not be the one you meant; and URL fragment links like #card jump to whichever matching element the browser finds first. None of this throws an error — it just quietly does the wrong thing on the second and later elements, which makes it a common source of "why isn't my JS working on this one row" bugs.

Frequently asked questions

Why doesn't the browser just refuse to render duplicate IDs?

HTML parsing is deliberately permissive — browsers render whatever markup they receive rather than rejecting it, applying error-recovery rules instead of failing outright. Duplicate IDs are valid enough to parse; they just violate the uniqueness constraint the spec places on the attribute's meaning, which is a semantic rule, not a syntax rule.

What should I use instead of a repeated id?

A class. IDs are for a single element you'll reference directly (via CSS, JS, or a URL fragment); classes are for grouping any number of elements that share styling or behavior.