no-duplicate-id

This rule disallows duplicate id attributes.

Why?

In HTML, the id attribute must be unique within a document. Duplicate IDs can break CSS and JavaScript selectors and interfere with accessibility tools.

How to use

.eslintrc.js
module.exports = {
  rules: {
    "@html-eslint/no-duplicate-id": "error",
  },
};

Rule Details

Examples of incorrect code for this rule:

<div id="foo"></div>
<div id="foo"></div>

Examples of correct code for this rule:

<div id="foo"></div>
<div id="bar"></div>

Further Reading

  1. MDN: id