Does the id attribute of an HTML element have to be unique in the whole page?

html

responsive-design

best-practices

web-development

byAnton Shumikhin·Feb 5, 2025

Each id must be unique on your webpage—no duplicates. Identical id values cause hiccups with CSS and JavaScript functionality.

Example:

<!-- As unique as a unicorn -->
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>

<!-- As problematic as sharing Netflix password -->
<div id="section"></div>
<div id="section"></div> <!-- Watch out, stranger danger! -->

Each element likes to flaunt its own unique id. Make it happen!

HTML standards: Uniqueness is a virtue.

Both HTML4 and HTML5 standards put emphasis on ensuring that each id is as unique as a snowflake. Reasons:

JavaScript hell: document.getElementById(), for instance, may feel confused with duplicate id values. It's expectations vs. reality!
CSS tangle: Using an id selector should be smooth and straightforward. Always one-to-one, no love triangles!
Accessibility confusion: Screen readers can trip over their feet dealing with duplicate id values.

The stakes of DOM manipulation with duplicate `id` attributes.

In JavaScript or with its famous and handy libraries like jQuery, working with identical id values is like juggling sharp knives:

Sharp error pains: Using non-unique id values leads to a fiesta of errors. Like the ones that creep on you late into the night!
jQuery confusions: jQuery ends up in a maze when it bumps into non-unique id norms. Lost in translation, every time!

Componentization, Web Components, and Shadow DOM.

With modern web development structures, ensuring id uniqueness feels more like walking on a tightrope:

Shadow DOM: id uniqueness is a must here! Make your shadow DOM stand out!
Cloning: Generate unique id values when cloning components; it’s like naming twins differently!

And remember, when designing templates that repeat, id is the humans! Use class or data-* for repeated structures, like armies of clones!

Checking your ranks: the best practices.

Checking HTML regularly for duplicate id values is as essential as weekly laundry. How to stay clean:

W3C Validator: Keeps your HTML clean and fresh! Makes your id values shine.
Lifecycle Check: Generating elements dynamically? Ensure they get their own new, shiny id!

Responsible parenting: your non-unique `id` attributes.

In certain cases, you feel tempted to repeat id values. Handle with care:

Special Attributes: Use data-* or aria- attributes where id uniqueness is a challenge. Break the rules, but in style!
Styling: Use CSS classes to style groups. It's all about the teamwork!