Atributo “<” no permitido en el elemento “X” en este punto.

Cuando el analizador HTML encuentra un carácter < dentro de una etiqueta de apertura, no lo trata como el inicio de una nueva etiqueta, sino que trata de interpretarlo como un nombre de atributo. Dado que < no es un nombre de atributo válido, el validador W3C genera este error. El navegador puede seguir renderizando la página, pero el comportamiento es indefinido y puede variar entre diferentes navegadores, potencialmente llevando a un marcado roto o elementos que no se muestran correctamente.

Este problema ocurre más comúnmente en algunos escenarios:

• Pulsaciones accidentales — un < suelto tecleado mientras se editan atributos.
• Artefactos de copiar y pegar — fragmentos de otras etiquetas que se pegan en medio de un elemento.
• Paréntesis angulares mal ubicados — intentar anidar o cerrar etiquetas incorrectamente, como añadir < antes de /> en una etiqueta de auto-cierre.
• Errores de plantillas o generación de código — salida HTML dinámica que incorrectamente inyecta < en posiciones de atributos.

Debido a que este es un problema a nivel de sintaxis, puede causar errores de análisis en cascada. El analizador puede malinterpretar todo después del < suelto hasta que encuentre un > correspondiente, lo que puede engullir elementos o atributos subsecuentes y producir resultados de renderizado inesperados.

Cómo solucionarlo

1. Abre el archivo referenciado por el error del validador y ve al número de línea indicado.
2. Busca dentro de la etiqueta de apertura del elemento señalado un carácter < que no pertenezca.
3. Elimina el carácter < suelto.
4. Si el < estaba destinado a representar un signo literal de menor que en un valor de atributo, reemplázalo con la entidad HTML <.

Ejemplos

< suelto antes de la barra de cierre

<!-- ❌ "<" suelto antes de la barra de auto-cierre -->

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

<!-- ✅ Corregido: eliminado el "<" suelto -->

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

< suelto entre atributos

<!-- ❌ "<" accidental entre atributos -->

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

<!-- ✅ Corregido: eliminado el "<" suelto -->

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

Fragmento de otra etiqueta pegado dentro de un elemento

<!-- ❌ "<span" sobrante pegado dentro de la etiqueta de apertura del div -->

<div class="card" <span>
  <p>Hello world</p>
</div>

<!-- ✅ Corregido: eliminado el fragmento pegado -->

<div class="card">
  <p>Hello world</p>
</div>

< literal intencionado en un valor de atributo

Si realmente necesitas un signo de menor que dentro de un valor de atributo — por ejemplo, en un atributo title o data-* — usa la entidad < en lugar de un < crudo.

<!-- ❌ "<" crudo en un valor de atributo puede causar problemas de análisis -->

<span title="x < 10">Threshold</span>

<!-- ✅ Corregido: usar la entidad HTML -->

<span title="x &lt; 10">Threshold</span>

Más información:

MDN Reference

HTML attribute reference

→

WHATWG Spec

HTML syntax

→