Acerca de este problema HTML
HTML sigue reglas estrictas de anidamiento: cuando un elemento se abre dentro de otro, el elemento interno debe cerrarse antes que el externo. Esto a veces se llama el principio de “último en abrir, primero en cerrar”. Cuando una etiqueta de cierre </b> aparece mientras otro elemento que fue abierto dentro del <b> sigue abierto, el validador reporta esta violación de anidamiento.
Esto importa por varias razones. Primero, los navegadores deben adivinar lo que pretendías cuando encuentran etiquetas mal anidadas, y diferentes navegadores pueden interpretar la estructura de manera diferente, llevando a un renderizado inconsistente. Segundo, las tecnologías de asistencia como lectores de pantalla dependen de un árbol DOM bien formado para transmitir el significado y estructura correctos del contenido a los usuarios. Las etiquetas mal anidadas pueden producir una experiencia confusa o rota. Tercero, los elementos mal anidados pueden causar comportamientos inesperados con el estilo CSS, ya que el árbol DOM calculado puede no coincidir con lo que escribiste en tu código fuente.
La solución es directa: siempre cierra los elementos en el orden exactamente inverso al que los abriste. Si <b> se abre primero y <a> se abre segundo, entonces </a> debe venir antes que </b>.
Ejemplos
Incorrecto: <b> cerrado antes que un <a> anidado
<p><b><a href="/about">About us</b></a></p>
Aquí, el elemento <a> fue abierto dentro del <b>, pero </b> aparece antes que </a>. Esto viola las reglas de anidamiento.
Correcto: elemento interno cerrado primero
<p><b><a href="/about">About us</a></b></p>
El <a> se cierra primero, luego el <b>, respetando el orden en que fueron abiertos.
Incorrecto: múltiples violaciones de anidamiento
<p><b><em><a href="#">Click here</b></em></a></p>
Tres elementos se abren (<b>, luego <em>, luego <a>), pero se cierran en el orden incorrecto.
Correcto: cierre apropiado en orden inverso
<p><b><em><a href="#">Click here</a></em></b></p>
Los elementos se cierran en orden inverso: </a> primero, luego </em>, luego </b>.
Incorrecto: <b> superponiéndose con un elemento de nivel de bloque
<b><p>Bold paragraph</b></p>
Más allá del problema de orden de anidamiento, nota que <b> es un elemento de fraseo (en línea) y no debería envolver <p> (un elemento de flujo/bloque). Esta es una violación separada pero relacionada.
Correcto: <b> dentro del párrafo
<p><b>Bold paragraph</b></p>
El elemento <b> ahora está apropiadamente colocado dentro del <p>, y el orden de anidamiento es correcto.
Un modelo mental útil
Piensa en el anidamiento HTML como paréntesis en matemáticas. Cada apertura debe tener su cierre correspondiente, y no pueden cruzarse:
Incorrecto: ( [ ) ]
Correcto: ( [ ] )Traduciendo a HTML:
<!-- Incorrecto -->
<b><em>text</b></em>
<!-- Correcto -->
<b><em>text</em></b>Si estás trabajando con marcado complejo o profundamente anidado, usar un editor de código con etiquetas de auto-cierre y coincidencia de corchetes puede ayudarte a detectar estos problemas antes de que lleguen al validador.
Encuentra problemas como este automáticamente
Rocket Validator escanea miles de páginas en segundos, detectando problemas de HTML en todo tu sitio web.
Más información: