La etiqueta de cierre “strong” viola las reglas de anidamiento.

HTML sigue un modelo de anidamiento estricto donde los elementos deben estar adecuadamente contenidos unos dentro de otros. Cuando abres un elemento <strong> y luego abres otro elemento dentro de él (como <a>, <em>, o <span>), debes cerrar primero el elemento interno antes de cerrar </strong>. Cerrar etiquetas fuera de orden crea elementos superpuestos, lo cual viola la especificación HTML.

Esto es importante por varias razones clave. Primero, los navegadores deben adivinar cómo interpretar el marcado mal anidado, y diferentes navegadores pueden resolver la ambigüedad de manera diferente, llevando a una renderización inconsistente. Segundo, las tecnologías de asistencia como los lectores de pantalla dependen de un árbol de documento bien formado para transmitir la estructura y el énfasis correctos a los usuarios. Las etiquetas superpuestas producen un árbol DOM roto que puede confundir estas herramientas. Tercero, la especificación HTML de WHATWG define explícitamente el modelo de análisis como una estructura de árbol — los elementos no pueden superponerse parcialmente porque un nodo de árbol solo puede tener un padre.

La solución es sencilla: siempre cierra los elementos en el orden inverso al que se abrieron. Piénsalo como una regla de “último abierto, primero cerrado”. Si <strong> se abre primero y <a> se abre segundo, entonces </a> debe venir antes que </strong>.

Ejemplos

Incorrecto: etiquetas superpuestas

La etiqueta </strong> se cierra antes que la etiqueta <a> interna, violando las reglas de anidamiento:

<p><strong><a href="/about">About us</strong></a></p>

Correcto: etiquetas correctamente anidadas

El elemento <a> está completamente cerrado antes de </strong>:

<p><strong><a href="/about">About us</a></strong></p>

Incorrecto: múltiples elementos anidados cerrados fuera de orden

Aquí <strong> se superpone tanto con <em> como con <a>:

<p><strong><em><a href="#">Learn more</strong></em></a></p>

Correcto: cerrando en orden inverso

Cada etiqueta se cierra en el orden exactamente inverso al que se abrió:

<p><strong><em><a href="#">Learn more</a></em></strong></p>

Incorrecto: strong extendiéndose a través de límites de elementos de bloque

A veces la violación del anidamiento ocurre cuando <strong> envuelve elementos de lista u otras estructuras:

<ul>
  <li><strong>First item</li>
  <li>Second item</strong></li>
</ul>

Correcto: aplicar strong dentro de cada elemento individualmente

Mantén <strong> completamente contenido dentro de cada <li>:

<ul>
  <li><strong>First item</strong></li>
  <li><strong>Second item</strong></li>
</ul>

Una forma útil de detectar estos problemas es rastrear visualmente tus etiquetas de apertura y cierre — si dibujas líneas conectando cada par, las líneas nunca deberían cruzarse. Si se cruzan, tienes una violación del anidamiento que necesita ser reordenada.

Más información:

MDN Reference

MDN - strong - The Strong Importance element

→