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

HTML requiere que los elementos estén correctamente anidados, lo que significa que debes cerrar los elementos hijos antes de cerrar sus elementos padre. Cuando una etiqueta de cierre </em> aparece en el lugar incorrecto — como antes de que se haya cerrado un elemento interior, o después de que ya se haya cerrado un elemento exterior — el navegador encuentra etiquetas superpuestas que violan la especificación HTML. A esto a veces se le llama “sopa de etiquetas”.

Los navegadores intentan recuperarse de las etiquetas superpuestas, pero la forma en que lo hacen es impredecible y puede no coincidir con tu intención. Un navegador podría cerrar automáticamente el elemento interior, mientras que otro podría reestructurar el DOM de forma diferente. Esto puede llevar a un renderizado inconsistente, estilos rotos y comportamientos inesperados entre navegadores. También crea problemas para tecnologías asistivas como lectores de pantalla, que dependen de un árbol de documento bien formado para transmitir significado a los usuarios.

La regla de anidamiento es sencilla: los elementos deben cerrarse en el orden inverso al que se abrieron. Si abres <em> y luego abres <a>, debes cerrar </a> primero, luego </em>. Piénsalo como apilar cajas — no puedes quitar una caja de abajo sin primero quitar la de arriba.

Este problema también puede surgir cuando <em> se usa a través de límites de elementos a nivel de bloque. Por ejemplo, envolver <em> alrededor de múltiples elementos <p> o cerrar </em> dentro de un <div> cuando se abrió fuera de él también activará este error.

Ejemplos

Superposición con un elemento en línea

La etiqueta </em> se cierra antes que la etiqueta anidada <a>, creando elementos superpuestos:

<!-- ❌ Incorrecto: <em> se cierra antes que <a> -->

<p><em><a href="#">enlace</em></a></p>

Cierra primero el elemento interior <a>, luego el exterior <em>:

<!-- ✅ Correcto: las etiquetas se cierran en orden inverso -->

<p><em><a href="#">enlace</a></em></p>

Superposición con un elemento a nivel de bloque

El elemento <em> se extiende a través de un límite de <p>, lo cual no está permitido:

<!-- ❌ Incorrecto: <em> abierto en un <p> y cerrado en otro -->

<p>Este es <em>texto enfatizado</p>
<p>que continúa aquí</em> en un nuevo párrafo.</p>

Aplica <em> por separado dentro de cada elemento <p>:

<!-- ✅ Correcto: <em> está correctamente contenido dentro de cada <p> -->

<p>Este es <em>texto enfatizado</em></p>
<p><em>que continúa aquí</em> en un nuevo párrafo.</p>

Múltiples niveles de anidamiento

Con elementos profundamente anidados, cada etiqueta debe aún cerrarse en estricto orden inverso:

<!-- ❌ Incorrecto: </em> se cierra antes que </strong> -->

<p><em><strong>negrita y cursiva</em></strong></p>

<!-- ✅ Correcto: </strong> se cierra primero, luego </em> -->

<p><em><strong>negrita y cursiva</strong></em></p>

<em> cruzando un límite de <div>

<!-- ❌ Incorrecto: <em> abierto fuera del <div>, cerrado dentro -->

<em>
<div>
  <p>Algún contenido</p>
</em>
</div>

Mantén el elemento <em> completamente dentro o fuera del elemento de bloque:

<!-- ✅ Correcto: <em> está completamente contenido dentro del <div> -->

<div>
  <p><em>Algún contenido</em></p>
</div>

Cómo detectar y corregir estos errores

1. Lee el mensaje de error cuidadosamente. El validador W3C usualmente te dice en qué línea está el problema y qué etiquetas están involucradas.
2. Empareja cada etiqueta de apertura con su etiqueta de cierre. Rastrea el anidamiento para asegurarte de que cada par esté correctamente contenido dentro de su padre.
3. Usa sangría consistente. El código correctamente sangrado hace que los problemas de anidamiento sean mucho más fáciles de ver de un vistazo.
4. Revisa errores de copiar y pegar. Las etiquetas superpuestas a menudo se cuelan cuando el código se mueve entre elementos sin actualizar las etiquetas circundantes.

Más información:

MDN Reference

MDN - em - The Emphasis element

→