HTML Guides for duplicate attribute

When an HTML element contains the same attribute more than once, the browser must decide which value to use. According to the WHATWG HTML specification, the parser keeps only the first occurrence and silently discards the rest. This means any values you placed in the second (or subsequent) attribute are completely ignored — often leading to unexpected behavior that can be difficult to debug.

This issue commonly arises in a few scenarios:

• Copy-paste mistakes where code fragments are merged without deduplicating attributes.
• Template or CMS output where multiple systems each inject the same attribute onto an element.
• Attempting to assign multiple values by repeating the attribute instead of combining the values into one (especially common with class and style).

Why this matters

• Unpredictable behavior: Since only the first value is kept, the duplicate is silently dropped. If you intended the second value, your page won’t work as expected and there will be no visible error in the browser console.
• Accessibility concerns: Duplicate id attributes or duplicate ARIA attributes can confuse assistive technologies, breaking navigation and screen reader announcements.
• Standards compliance: Duplicate attributes violate the HTML specification and will cause validation errors, which can signal deeper quality issues in your markup.
• Maintainability: Code with duplicate attributes is harder to read and maintain, and it obscures the developer’s intent.

Examples

❌ Duplicate class attribute

A common mistake is trying to add multiple classes by repeating the class attribute:

<div class="card" class="highlighted">Content</div>

The browser only applies "card" and ignores "highlighted" entirely.

✅ Merge classes into a single attribute

Combine all class names into one space-separated class attribute:

<div class="card highlighted">Content</div>

❌ Duplicate id attribute

<a id="home-link" id="nav-link">Home</a>

Only "home-link" is used; "nav-link" is discarded.

✅ Use a single id

Choose the appropriate id value. If you need multiple hooks for styling or scripting, use class for the additional identifier:

<a id="home-link" class="nav-link">Home</a>

❌ Duplicate style attribute

<p style="color: red;" style="font-weight: bold;">Important text</p>

Only color: red is applied; the bold style is lost.

✅ Combine styles into one attribute

<p style="color: red; font-weight: bold;">Important text</p>

❌ Duplicate data-* or event attributes

This also applies to data attributes and event handlers:

<button data-action="save" data-action="submit" onclick="handleClick()" onclick="trackEvent()">
  Submit
</button>

✅ Use a single value per attribute

<button data-action="submit" onclick="handleClick(); trackEvent();">
  Submit
</button>

❌ Duplicate attributes in template output

Templating systems sometimes produce duplicate attributes when multiple directives target the same element:

<input type="text" name="email" placeholder="Enter email" placeholder="you@example.com">

✅ Ensure templates produce a single attribute

Review your template logic so only one value is rendered:

<input type="text" name="email" placeholder="you@example.com">

How to fix it

1. Search your markup for the attribute name flagged by the validator. Look for it appearing more than once on the same element.
2. Decide which value is correct. If both values are needed, merge them into a single attribute (e.g., space-separated class names, semicolon-separated style declarations).
3. Remove the duplicate. Delete the extra occurrence so only one remains.
4. Check your build tools and templates. If the duplication comes from a CMS, templating engine, or JavaScript that sets attributes dynamically, fix the source rather than just the output.
5. Re-validate your page to confirm the error is resolved.