IDs must be unique

ZMD016

Ensure each id attribute value appears only once in the document to preserve fragment links and accessibility mappings.

✅ Good

<div id="item-1"></div>
<div id="item-2"></div>

❌ Bad

<div id="item"></div>
<div id="item"></div>

When: The same id attribute appears more than once

Warning: Duplicate id "X"

Solution: Ensure each id value is unique

Why it matters

Accessibility: Assistive technologies may skip or misattribute content when IDs collide :contentReference[oaicite:15]{index=15}.

SEO: Fragment links (`#id`) may unpredictably navigate to the wrong section or not at all.

In brief

  • Goal: Prevent duplicate identifiers in the HTML document.
  • What to do: Audit the codebase and assign unique id values to each element.
  • Why: Duplicate IDs break internal links, scripting, and confuse screen readers.

Intent

Maintain a one-to-one mapping between IDs and elements for reliable navigation and scripting.

Benefits

  • Consistent behavior of document.querySelector and getElementById :contentReference[oaicite:13]{index=13}.
  • Accurate fragment link navigation (e.g., example.com/page#section) :contentReference[oaicite:14]{index=14}.

Techniques

  • H93: Ensuring that id attributes are unique on a Web page.

HTML Semantics

The id global attribute must be unique per the HTML specification to identify elements unambiguously.

References

Tips & edge cases

  • Run an automated audit (e.g., axe, HTML validator) to catch duplicate IDs before deployment.

See also