# Duplicate attribute “X”.

> Canonical HTML version: https://rocketvalidator.com/html-validation/duplicate-attribute-x
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

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](https://html.spec.whatwg.org/multipage/parsing.html#parse-error-duplicate-attribute), 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:

```html
<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:

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

### ❌ Duplicate `id` attribute

```html
<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:

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

### ❌ Duplicate `style` attribute

```html
<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

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

### ❌ Duplicate `data-*` or event attributes

This also applies to data attributes and event handlers:

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

### ✅ Use a single value per attribute

```html
<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:

```html
<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:

```html
<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.