Duplicate ID Attributes
The id attribute must be unique within a page. When multiple elements share the same id, document.getElementById() only returns the first match. Anchor links (#section) may scroll to the wrong element. CSS ID selectors may not style all instances.
Why It Matters
Duplicate IDs break JavaScript functionality, cause ARIA references to point to wrong elements (breaking screen reader navigation), make anchor links unreliable, and produce invalid HTML that validators flag as errors.
Code Examples
<div id="header">Site header</div> <div id="header">Page header</div> <label for="email">Email</label> <input id="email" type="email"> <input id="email" type="text">
<div id="site-header">Site header</div> <div id="page-header">Page header</div> <label for="email">Email</label> <input id="email" type="email"> <input id="username" type="text">
How to Fix
- 1Search your HTML for duplicate IDs — our validator flags them automatically.
- 2Use more specific ID names (site-header vs page-header).
- 3Use classes instead of IDs when styling multiple similar elements.
- 4For JavaScript, use data-* attributes or classes instead of IDs when selecting multiple elements.
Check Your HTML Now
Our validator detects this error automatically and shows the exact line number.
Open HTML ValidatorHostinger — Fast & Affordable Web Hosting
Deploy clean, validated HTML on reliable hosting.
Related HTML Errors
Unclosed HTML Tag
Learn why unclosed HTML tags break layouts and how to fix them. Find unclosed div, p, span, and other tags with examples.
Incorrect Tag Nesting
Learn the HTML nesting rules: which elements can contain which. Fix p inside p, div inside span, and other nesting errors.
Missing Alt Attribute on Images
Learn why every img element needs an alt attribute and how to write good alt text for accessibility and SEO.