skip to content →
infoSEO RULE · R31

Duplicate element IDs: why they break JS, CSS, and accessibility

Every HTML id attribute must be unique within the page. Duplicate IDs break label-for relationships, getElementById queries, fragment-link navigation, and CSS targeting. They're an easy bug to ignore and an easy one to fix.

Every HTML id attribute must be unique within the page. Duplicate IDs break label-for relationships, getElementById queries, fragment-link navigation, and CSS targeting. They're an easy bug to ignore and an easy one to fix. An id attribute identifies a single element. The HTML spec requires it to be unique within the document. Common sources of duplication: server-rendered components that repeat with the same id, copy-paste of CMS blocks, or hard-coded ids in component libraries.

Last updated·part of the 50-rule library

What it is

An id attribute identifies a single element. The HTML spec requires it to be unique within the document. Common sources of duplication: server-rendered components that repeat with the same id, copy-paste of CMS blocks, or hard-coded ids in component libraries.

Why it matters

getElementById returns only the first match. Anchor links (#contact) jump to the first match. <label for="email"> attaches to the first match, breaking accessibility on the others. ARIA references break silently.

How to fix it

  1. Audit duplicate IDs with axe DevTools. The "duplicate-id" rule will list every offender. Group by component to fix at the template level.
  2. Make component IDs unique per instance. Append an index, a UUID, or use scoped naming. React: use useId(). Vue: useId() or a per-instance counter.
  3. Audit anchor links. Internal #fragment links should target unique IDs. If you have two #contact targets, the second is dead.

Authoritative sources

Related SEO rules