The first occurrence of ID “X” was here.

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

<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

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

<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

<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

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

Learn more:

MDN Reference

HTML id attribute - MDN Web Docs

→

WHATWG Spec

HTML specification - Semantics, structure, and APIs of HTML documents

→