Linter Rule: Disallow duplicate IDs in the same document

Rule: html-no-duplicate-ids

Description

Ensure that id attribute is unique within a document.

Rationale

Duplicate IDs in an HTML document can lead to unexpected behavior, especially when using JavaScript or CSS that relies on unique identifiers. Browsers may not handle duplicate IDs consistently, which can cause issues with element selection, styling, and event handling.

Examples

✅ Good

html

<div id="header">Header</div>
<div id="main-content">Main Content</div>
<div id="footer">Footer</div>

erb

<div id="<%= dom_id("header") %>">Header</div>
<div id="<%= dom_id("main_content") %>">Main Content</div>
<div id="<%= dom_id("footer") %>">Footer</div>

🚫 Bad

html

<div id="header">Header</div>

<div id="header">Duplicate Header</div>Duplicate ID `header` found. IDs must be unique within a document. (html-no-duplicate-ids)

<div id="footer">Footer</div>

erb

<div id="<%= dom_id("header") %>">Header</div>

<div id="<%= dom_id("header") %>">Duplicate Header</div>Duplicate ID `<%= dom_id("header") %>` found. IDs must be unique within a document. (html-no-duplicate-ids)

<div id="<%= dom_id("footer") %>">Footer</div>

Linter Rule: Disallow duplicate IDs in the same document ​

Description ​

Rationale ​

Examples ​

✅ Good ​

🚫 Bad ​

References ​