Validación HTML: Se encontró "<" cuando se esperaba un nombre de atributo. Causa probable: falta ">" inmediatamente antes.

Acerca de este problema HTML

Cuando el analizador HTML lee una etiqueta, espera una secuencia específica: el nombre de la etiqueta, luego atributos opcionales (cada uno con un nombre, opcionalmente seguido de = y un valor), y finalmente un > de cierre. Si el analizador encuentra un carácter < en una posición donde está buscando un nombre de atributo, significa que algo ha salido mal estructuralmente. El analizador interpreta el < como el comienzo de una nueva etiqueta, pero como todavía está dentro de la definición de la etiqueta actual, genera este error.

Este problema comúnmente surge de tres escenarios:

Un carácter < perdido dentro de una etiqueta — quizás por un error de tipeo o un error de copiar-pegar.
Un > faltante en una etiqueta anterior — causando que el analizador trate el < de la siguiente etiqueta como si todavía fuera parte de los atributos de la etiqueta anterior.
Etiquetas anidadas incorrectamente o superpuestas — donde un elemento se coloca accidentalmente dentro de la etiqueta de apertura de otro elemento.

Esto importa porque los navegadores manejan HTML mal formado de manera impredecible. Un navegador podría ignorar silenciosamente el carácter perdido, mientras que otro podría eliminar todo el elemento o renderizar el contenido incorrectamente. Corregir estos errores estructurales asegura un renderizado consistente en todos los navegadores y mejora la accesibilidad, ya que los lectores de pantalla y otras tecnologías asistivas dependen de marcado bien formado para interpretar la estructura de la página.

Ejemplos

Carácter `<` perdido dentro de una etiqueta

Un error de tipeo común donde un < extra aparece antes del cierre de una etiqueta auto-cerrada o entre atributos:

<!-- ❌ "<" perdido dentro de la etiqueta img -->

<img src="photo.jpg" alt="smiling cat" < />

Elimina el carácter < perdido:

<!-- ✅ Corregido: sin "<" extra -->

<img src="photo.jpg" alt="smiling cat" />

`>` faltante en una etiqueta anterior

Cuando a una etiqueta le falta su > de cierre, el analizador continúa leyendo la siguiente etiqueta como si fuera parte de los atributos de la primera etiqueta:

<!-- ❌ El <div> de apertura no tiene su ">" de cierre -->

<div class="wrapper"
<p>Hello, world!</p>
</div>

El analizador ve <p> mientras todavía está dentro de la etiqueta <div>, disparando el error. Agrega el > faltante:

<!-- ✅ Corregido: <div> está correctamente cerrado -->

<div class="wrapper">
  <p>Hello, world!</p>
</div>

`>` faltante en una etiqueta con múltiples atributos

Esto a menudo sucede con etiquetas que tienen muchos atributos, haciendo fácil perderse el > de cierre:

<!-- ❌ La etiqueta <a> no tiene su ">" de cierre -->

<a href="/about" class="nav-link" id="about-link"
<span>About Us</span>
</a>

<!-- ✅ Corregido: ">" de cierre agregado a la etiqueta <a> -->

<a href="/about" class="nav-link" id="about-link">
  <span>About Us</span>
</a>

Corchete angular accidental en un valor de atributo

Si un valor de atributo contiene un < que no está correctamente entrecomillado, el analizador puede malinterpretarlo:

<!-- ❌ Valor de atributo sin comillas o roto con "<" -->

<div title=5<10>
  <p>Content</p>
</div>

Asegúrate de que los valores de atributo que contengan caracteres especiales estén correctamente entrecomillados y usa entidades HTML donde sea necesario:

<!-- ✅ Corregido: el valor está entrecomillado y usa una entidad para "<" -->

<div title="5&lt;10">
  <p>Content</p>
</div>

Cómo depurar este error

Cuando veas este error, sigue estos pasos:

Ve al número de línea reportado por el validador.
Mira la etiqueta en esa línea — verifica si tiene un carácter < perdido.
Si la etiqueta se ve bien, verifica la etiqueta inmediatamente anterior — un > faltante en la etiqueta anterior es a menudo el verdadero culpable.
Verifica que todos los valores de atributo estén correctamente entrecomillados — valores sin comillas que contengan < pueden disparar este error.
Usa un editor de código con resaltado de sintaxis — etiquetas no coincidentes o rotas son usualmente fáciles de detectar cuando los colores de sintaxis se ven incorrectos.