# The first occurrence of ID “X” was here.

> Canonical HTML version: https://rocketvalidator.com/html-validation/the-first-occurrence-of-id-x-was-here
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

The HTML specification requires that every `id` attribute value must be unique within a document. When the validator encounters the same `id` on two or more elements, it raises an error on the second (and subsequent) occurrences, along with a companion message — "The first occurrence of ID 'X' was here" — pointing to the original element. This companion message helps you quickly compare both locations and decide which one to rename or remove.

## Why Duplicate IDs Are a Problem

**Accessibility:** Screen readers and other assistive technologies rely on unique IDs to associate `<label>` elements with form controls, to navigate ARIA relationships like `aria-labelledby` and `aria-describedby`, and to jump to page landmarks. When IDs are duplicated, these associations break, leaving users confused or unable to interact with the page properly.

**JavaScript behavior:** Methods like `document.getElementById()` return only the first matching element. If you intend to target the second element with a duplicated ID, your code will silently operate on the wrong one. This can lead to bugs that are difficult to track down.

**CSS specificity:** While `#my-id` selectors will style all elements with that ID in most browsers, this is non-standard behavior. Relying on it leads to fragile, unpredictable styling.

**Fragment navigation:** Links using `href="#section"` scroll to the first element with that ID. Duplicate IDs make it impossible to link to the second occurrence.

## How to Fix It

1. **Identify the duplicates.** The validator tells you the line number of the first occurrence and the line number of the duplicate. Compare both elements.
2. **Rename one of the IDs** to something unique and descriptive. Update any corresponding references (labels, ARIA attributes, JavaScript selectors, CSS rules, and anchor links).
3. **Use `class` instead of `id`** when you need to apply the same style or behavior to multiple elements. Classes are designed to be reused; IDs are not.

## Examples

### ❌ Duplicate IDs trigger the error

```html
<div id="product-card">
  <h2>Widget A</h2>
  <p>A useful widget.</p>
</div>

<div id="product-card">
  <h2>Widget B</h2>
  <p>Another useful widget.</p>
</div>
```

The validator will report an error on the second `div` and display the message "The first occurrence of ID 'product-card' was here" pointing to the first `div`.

### ✅ Fixed: Give each element a unique ID

```html
<div id="product-card-a">
  <h2>Widget A</h2>
  <p>A useful widget.</p>
</div>

<div id="product-card-b">
  <h2>Widget B</h2>
  <p>Another useful widget.</p>
</div>
```

### ✅ Fixed: Use a class for shared styling or behavior

If both elements don't need to be individually targeted, replace the `id` with a `class`:

```html
<div class="product-card">
  <h2>Widget A</h2>
  <p>A useful widget.</p>
</div>

<div class="product-card">
  <h2>Widget B</h2>
  <p>Another useful widget.</p>
</div>
```

### ❌ Duplicate IDs breaking a label association

```html
<label for="email">Email</label>
<input type="email" id="email" name="primary-email">

<label for="email">Backup Email</label>
<input type="email" id="email" name="backup-email">
```

Both labels point to `for="email"`, but only the first input will be associated. The second label effectively has a broken link.

### ✅ Fixed: Unique IDs for each form control

```html
<label for="primary-email">Email</label>
<input type="email" id="primary-email" name="primary-email">

<label for="backup-email">Backup Email</label>
<input type="email" id="backup-email" name="backup-email">
```

Now each `<label>` correctly associates with its own `<input>`, and both assistive technologies and JavaScript can target each field reliably.