Validación HTML: ID duplicado "X".

Acerca de este problema HTML

El atributo id funciona como un identificador único para un solo elemento en el DOM. La especificación de HTML requiere explícitamente que los valores de id sean únicos en todo el documento. Cuando reutilizas un id, violas este contrato, y las consecuencias pueden ser sutiles pero de gran alcance.

El comportamiento de JavaScript se vuelve impredecible. Métodos como document.getElementById() solo devolverán el primer elemento con un id dado, ignorando silenciosamente cualquier duplicado. Esto puede causar que los scripts apunten al elemento equivocado o fallen al interactuar con elementos que esperas que alcancen.

Los selectores CSS pueden no aplicarse como se pretende. Aunque la mayoría de navegadores aplicarán estilos a todos los elementos con un id duplicado, este comportamiento no está garantizado por la especificación y puede llevar a inconsistencias entre navegadores.

La accesibilidad se ve comprometida. Los lectores de pantalla y otras tecnologías de asistencia dependen de IDs únicos para asociar etiquetas con controles de formulario (a través del emparejamiento for/id), vincular referencias aria-describedby o aria-labelledby a elementos específicos, y navegar identificadores de fragmento (enlaces ancla). Los IDs duplicados rompen estas asociaciones, pudiendo hacer el contenido confuso o inutilizable para personas que dependen de tecnología de asistencia.

La navegación por fragmentos se rompe. Cuando una URL contiene un hash como #section-intro, el navegador se desplaza al elemento con ese id. Si múltiples elementos comparten el mismo id, solo el primero será objetivo, que puede no ser el destino pretendido.

Las causas comunes de IDs duplicados incluyen copiar y pegar bloques HTML sin actualizar los valores de id, generar contenido dinámicamente en un bucle sin añadir un sufijo único, y reutilizar parciales de plantilla que contienen atributos id codificados.

Para solucionar este problema, audita tu documento en busca de valores de id repetidos. Si múltiples elementos necesitan el mismo identificador para propósitos de estilo, usa el atributo class en su lugar. Si el id es necesario para JavaScript o referencias ARIA, haz que cada valor sea único — por ejemplo, añadiendo un número o sufijo descriptivo.

Ejemplos

❌ IDs duplicados en múltiples elementos

<div id="card">
  <h2>First Card</h2>
</div>
<div id="card">
  <h2>Second Card</h2>
</div>

Ambos elementos <div> comparten id="card", lo que desencadena el error de validación.

✅ Usa IDs únicos

<div id="card-1">
  <h2>First Card</h2>
</div>
<div id="card-2">
  <h2>Second Card</h2>
</div>

✅ Usa `class` en su lugar cuando no necesites identificación única

<div class="card">
  <h2>First Card</h2>
</div>
<div class="card">
  <h2>Second Card</h2>
</div>

❌ Los IDs duplicados rompen las asociaciones de etiquetas

<label for="email">Work Email</label>
<input type="email" id="email" name="work_email">

<label for="email">Personal Email</label>
<input type="email" id="email" name="personal_email">

Ambos inputs comparten id="email", por lo que el segundo <label> apuntará incorrectamente al primer input. Un usuario de lector de pantalla que haga clic en “Personal Email” sería enfocado en el campo equivocado.

✅ IDs únicos para cada par etiqueta–input

<label for="work-email">Work Email</label>
<input type="email" id="work-email" name="work_email">

<label for="personal-email">Personal Email</label>
<input type="email" id="personal-email" name="personal_email">

❌ IDs duplicados en contenido repetido dinámicamente

Esto ocurre frecuentemente al generar HTML en un bucle o reutilizar una plantilla:

<section id="product">
  <h2>Widget A</h2>
</section>
<section id="product">
  <h2>Widget B</h2>
</section>
<section id="product">
  <h2>Widget C</h2>
</section>

✅ Añade un sufijo único

<section id="product-1">
  <h2>Widget A</h2>
</section>
<section id="product-2">
  <h2>Widget B</h2>
</section>
<section id="product-3">
  <h2>Widget C</h2>
</section>

Si ningún elemento realmente necesita ser identificado de forma única, elimina el id por completo y usa una class o un atributo data en su lugar.