Error Atributo id duplicado
Por qué los valores de id deben ser únicos por documento, y cómo los duplicados rompen en silencio selectores CSS, JavaScript y enlaces de anclaje.
El validador marca cualquier valor de id que aparezca en más de un elemento del documento.
Ejemplo
<!-- Incorrecto: id usado dos veces -->
<div id="tarjeta">Primera</div>
<div id="tarjeta">Segunda</div>
<!-- Correcto: usar clases para elementos repetidos -->
<div class="tarjeta">Primera</div>
<div class="tarjeta">Segunda</div>Por qué importa
La especificación HTML exige que id sea único dentro de su documento precisamente porque depende de eso mucho más de lo que parece: document.getElementById() y querySelector('#id') devuelven solo la primera coincidencia, ignorando en silencio el resto; una regla CSS para #tarjeta se aplica al primer elemento encontrado, que puede no ser el que se buscaba; y los enlaces de fragmento de URL como #tarjeta saltan al primer elemento coincidente que encuentre el navegador. Nada de esto lanza un error — simplemente hace, en silencio, lo incorrecto en el segundo elemento y los siguientes, lo cual lo convierte en una fuente común de errores del tipo "por qué mi JS no funciona en esta fila".
Frequently asked questions
¿Por qué el navegador no rechaza directamente los ids duplicados?
El análisis de HTML es deliberadamente permisivo — los navegadores renderizan cualquier markup que reciben en vez de rechazarlo, aplicando reglas de recuperación de errores en lugar de fallar del todo. Los ids duplicados son lo bastante válidos para analizarse; solo violan la restricción de unicidad que la especificación le impone al significado del atributo, que es una regla semántica, no una regla de sintaxis.
¿Qué debería usar en vez de un id repetido?
Una clase. Los ids son para un solo elemento al que se hará referencia directa (por CSS, JS o un fragmento de URL); las clases son para agrupar cualquier cantidad de elementos que comparten estilo o comportamiento.