Validación HTML: La etiqueta de cierre "a" viola las reglas de anidado.

Acerca de este problema HTML

La especificación HTML prohíbe explícitamente anidar elementos <a> dentro de otros elementos <a>. Esto está definido como parte del modelo de contenido para el elemento <a> — es “transparente” pero no debe contener ningún contenido interactivo, lo cual incluye otros elementos <a>. Cuando el validador encuentra una etiqueta de cierre </a> que violaría estas reglas de anidado, genera este error.

Esto típicamente ocurre en uno de dos escenarios:

Una etiqueta de cierre </a> faltante — Olvidas cerrar un enlace, por lo que el siguiente enlace parece estar anidado dentro de él.
Envolver intencionalmente un enlace dentro de otro — Intentas colocar un enlace clicable dentro de un área clicable más grande, lo cual es HTML inválido.

Por qué esto importa

Cuando un elemento <a> está anidado dentro de otro elemento <a>, los navegadores deben adivinar lo que pretendías. Diferentes navegadores pueden manejar esto de manera diferente — algunos cerrarán automáticamente el primer enlace antes de comenzar el segundo, mientras que otros pueden producir estructuras DOM inesperadas. Esto lleva a:

Comportamiento impredecible — Los objetivos de clic pueden no funcionar como se espera en diferentes navegadores.
Problemas de accesibilidad — Los lectores de pantalla dependen de un DOM bien estructurado. El anidado ambiguo confunde las tecnologías asistivas y hace que la navegación sea difícil para los usuarios que dependen de ellas.
Estilos rotos — Los selectores CSS que dependen de relaciones padre-hijo correctas pueden no aplicarse correctamente.

Cómo solucionarlo

Encuentra las etiquetas <a> problemáticas — El validador señalará la línea con el </a> de cierre problemático. Mira esa línea y las líneas arriba de ella para encontrar dónde comienza el problema de anidado.
Agrega etiquetas de cierre faltantes — Si olvidaste un </a>, agrégalo antes de que se abra el siguiente <a>.
Reestructura si es necesario — Si pretendías tener un enlace dentro de un área clicable más grande, rediseña el marcado para que los enlaces sean hermanos en lugar de anidados.

Ejemplos

❌ Una etiqueta de cierre faltante causa anidado implícito

El primer <a> nunca se cierra, por lo que el segundo <a> parece estar anidado dentro de él:

<nav>
  <a href="one.html">Página 1
  <a href="two.html">Página 2</a>
</nav>

✅ Solucionado agregando la etiqueta de cierre faltante

<nav>
  <a href="one.html">Página 1</a>
  <a href="two.html">Página 2</a>
</nav>

❌ Anidar enlaces intencionalmente (inválido)

Envolver un enlace dentro de un enlace más grande no está permitido, incluso si parece útil para propósitos de interfaz:

<a href="/article">
  <h2>Título del Artículo</h2>
  <p>Un breve resumen del artículo.</p>
  <a href="/author">Nombre del Autor</a>
</a>

✅ Solucionado reestructurando con enlaces hermanos

Usa posicionamiento CSS o una estrategia de diseño diferente para lograr el mismo resultado visual sin anidar:

<article>
  <a href="/article">
    <h2>Título del Artículo</h2>
    <p>Un breve resumen del artículo.</p>
  </a>
  <p>Por <a href="/author">Nombre del Autor</a></p>
</article>

❌ Olvidar cerrar enlaces en una lista

Esto es especialmente común en menús de navegación construidos con listas:

<ul>
  <li><a href="/home">Inicio</li>
  <li><a href="/about">Acerca de</a></li>
  <li><a href="/contact">Contacto</a></li>
</ul>

Aquí, el primer <a> nunca se cierra. La etiqueta </li> cierra implícitamente el <li>, pero el <a> permanece abierto, causando problemas de anidado con los enlaces subsecuentes.

✅ Solucionado cerrando correctamente cada enlace

<ul>
  <li><a href="/home">Inicio</a></li>
  <li><a href="/about">Acerca de</a></li>
  <li><a href="/contact">Contacto</a></li>
</ul>

Un buen hábito es escribir tanto las etiquetas de apertura como las de cierre <a> juntas antes de llenar el contenido. Esto previene la omisión accidental y mantiene tu HTML bien estructurado.