Error Atributo duplicado en la misma etiqueta
Por qué repetir un atributo como class o id en la misma etiqueta es inválido, y qué valor usan realmente los navegadores.
El validador marca cualquier nombre de atributo que aparezca más de una vez dentro de una sola etiqueta.
Ejemplo
<!-- Incorrecto: class repetido -->
<div class="tarjeta" class="destacada">...</div>
<!-- Correcto: combinar en un solo atributo -->
<div class="tarjeta destacada">...</div>Por qué importa
La especificación de parseo de HTML es explícita en esto: cuando una etiqueta de apertura tiene dos atributos con el mismo nombre, el parser conserva la primera aparición y descarta cualquier otra posterior. Esto es fácil de entender al revés — la mayoría asume que gana el último valor, como pasa con las declaraciones CSS duplicadas — y se termina depurando por qué una clase agregada o un id actualizado no tiene ningún efecto en silencio. Suele pasar cuando una plantilla combina atributos de dos fuentes sin revisar primero si ya existe un valor.
Frequently asked questions
¿Qué valor duplicado usa el navegador — el primero o el último?
El primero. Esto es lo opuesto a cómo se resuelven las declaraciones CSS duplicadas, lo cual confunde a la gente — en CSS gana la última declaración, pero en el parseo de atributos HTML, gana la primera aparición de un atributo repetido y el resto se descarta.
¿Cómo suele pasar esto por accidente?
Más que nada en código de plantillas que construye los atributos de una etiqueta a partir de más de una fuente — una clase base más una clase condicional, por ejemplo — sin combinarlas antes en un solo valor de atributo.