Validación HTML: La primera ocurrencia del ID "X" estaba aquí.

Acerca de este problema HTML

La especificación HTML requiere que cada valor de atributo id debe ser único dentro de un documento. Cuando el validador encuentra el mismo id en dos o más elementos, genera un error en la segunda ocurrencia (y las subsecuentes), junto con un mensaje complementario — “La primera ocurrencia del ID ‘X’ estaba aquí” — que apunta al elemento original. Este mensaje complementario te ayuda a comparar rápidamente ambas ubicaciones y decidir cuál renombrar o eliminar.

Por qué los IDs duplicados son un problema

Accesibilidad: Los lectores de pantalla y otras tecnologías asistivas dependen de IDs únicos para asociar elementos <label> con controles de formulario, para navegar relaciones ARIA como aria-labelledby y aria-describedby, y para saltar a puntos de referencia de la página. Cuando los IDs están duplicados, estas asociaciones se rompen, dejando a los usuarios confundidos o incapaces de interactuar con la página correctamente.

Comportamiento de JavaScript: Métodos como document.getElementById() devuelven solo el primer elemento coincidente. Si pretendes dirigirte al segundo elemento con un ID duplicado, tu código operará silenciosamente sobre el incorrecto. Esto puede llevar a errores que son difíciles de rastrear.

Especificidad CSS: Aunque los selectores #my-id darán estilo a todos los elementos con ese ID en la mayoría de los navegadores, este es un comportamiento no estándar. Depender de esto lleva a un estilo frágil e impredecible.

Navegación por fragmentos: Los enlaces que usan href="#section" se desplazan al primer elemento con ese ID. Los IDs duplicados hacen imposible enlazar a la segunda ocurrencia.

Cómo solucionarlo

Identifica los duplicados. El validador te dice el número de línea de la primera ocurrencia y el número de línea del duplicado. Compara ambos elementos.
Renombra uno de los IDs a algo único y descriptivo. Actualiza cualquier referencia correspondiente (etiquetas, atributos ARIA, selectores JavaScript, reglas CSS y enlaces de anclaje).
Usa class en lugar de id cuando necesites aplicar el mismo estilo o comportamiento a múltiples elementos. Las clases están diseñadas para ser reutilizadas; los IDs no.

Ejemplos

❌ Los IDs duplicados activan el 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>

El validador reportará un error en el segundo div y mostrará el mensaje “La primera ocurrencia del ID ‘product-card’ estaba aquí” apuntando al primer div.

✅ Solucionado: Dale a cada elemento un ID único

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

✅ Solucionado: Usa una clase para estilos o comportamientos compartidos

Si ambos elementos no necesitan ser dirigidos individualmente, reemplaza el id con una 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>

❌ IDs duplicados rompiendo una asociación de etiqueta

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

Ambas etiquetas apuntan a for="email", pero solo el primer input será asociado. La segunda etiqueta efectivamente tiene un enlace roto.

✅ Solucionado: IDs únicos para cada control de formulario

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

Ahora cada <label> se asocia correctamente con su propio <input>, y tanto las tecnologías asistivas como JavaScript pueden dirigirse a cada campo de manera confiable.