This rule raises an issue when multiple HTML elements in the same document have identical id attribute values.

Why is this an issue?

The HTML specification requires that id attribute values be unique within a document. When multiple elements share the same id, several problems can occur:

JavaScript methods like document.getElementById() will only return the first matching element, causing other elements to be unreachable
CSS selectors targeting the id may not style all intended elements consistently
Screen readers and other assistive technologies may become confused when navigating between elements
Form labels using the for attribute may not associate correctly with their intended form controls

These issues can lead to broken functionality, poor user experience, and accessibility barriers for users with disabilities.

What is the potential impact?

Duplicate id attributes can break JavaScript functionality, cause inconsistent styling, and create accessibility barriers. Users may be unable to interact with certain page elements, and assistive technologies may not work correctly.

How to fix it

Ensure each element has a unique id value. You can remove unnecessary id attributes or rename them to be unique.

Code examples

Noncompliant code example

<div id="content">Main content</div>
<div id="content">Secondary content</div> <!-- Noncompliant: duplicate id -->

Compliant solution

<div id="main-content">Main content</div>
<div id="secondary-content">Secondary content</div>

Resources