Validación HTML: La etiqueta de cierre "i" viola las reglas de anidamiento.

Acerca de este problema HTML

HTML sigue un modelo estricto de anidamiento basado en pila. Cuando abres un elemento, se convierte en el elemento “actual”, y cualquier elemento nuevo que abras se convierte en un hijo del mismo. Las etiquetas de cierre deben reflejar el orden de apertura de forma inversa. Cuando el validador encuentra  pero el elemento sin cerrar más recientemente abierto es otra cosa — como , , , o <a> — se violan las reglas de anidamiento porque el elemento  y el otro elemento se superponen en lugar de contenerse uno al otro.

Por ejemplo, si escribes ........., los elementos  y  se superponen. El  intenta cerrarse mientras  sigue abierto dentro de él, y luego  intenta cerrarse fuera de . Esto crea una estructura ambigua que ningún árbol DOM válido puede representar tal como está escrito. Los navegadores intentarán “arreglar” esto usando algoritmos de recuperación de errores, pero el resultado puede diferir entre navegadores y es poco probable que coincida con tu intención.

Por qué esto importa

Renderizado impredecible: La recuperación de errores del navegador puede reestructurar silenciosamente tu marcado, llevando a estilos faltantes, enlaces rotos o texto mal ubicado.
Accesibilidad: Los lectores de pantalla dependen de un árbol DOM bien formado. Los elementos mal anidados pueden hacer que la tecnología asistiva malinterprete la estructura, leyendo contenido fuera de orden o perdiendo señales de énfasis por completo.
Mantenibilidad: Las etiquetas superpuestas hacen que el código sea más difícil de leer y depurar. Las ediciones futuras tienen más probabilidades de introducir errores adicionales.

Causas comunes

Elementos en línea superpuestos: Abrir  y luego  (o , , , etc.) pero cerrar  antes de .
Etiquetas que cruzan un límite de anchor: Empezar  fuera de un elemento <a> pero cerrarlo dentro, o viceversa.
Errores de copiar-pegar: Duplicar un bloque de HTML que incluye iconos (ej., etiquetas  de Font Awesome) o elementos  solo para lectores de pantalla, luego editar parte de él sin arreglar el orden de etiquetas.
Mezclar marcado presentacional y semántico: Envolver  alrededor de contenido que ya contiene  o , luego accidentalmente cerrar en la secuencia incorrecta.

Cómo solucionarlo

Identifica el par superpuesto. El mensaje del validador usualmente señala la línea donde aparece . Busca el elemento sin cerrar más cercano que se abrió después de .
Reordena las etiquetas de cierre para que reflejen el orden de apertura de forma inversa. Si abriste  luego , cierra  luego .
Si la superposición es intencional (ej., quieres texto en negrita-cursiva que transicione a solo negrita), reestructura cerrando y reabriendo elementos en el límite en lugar de superponerlos.
Considera alternativas semánticas. El elemento  es para texto idiomático (términos técnicos, frases extranjeras, pensamientos). Si necesitas énfasis, usa . Si solo necesitas estilo cursiva, usa CSS font-style: italic;. Cualquiera que sea el elemento que elijas, las reglas de anidamiento son las mismas.

Ejemplos

Incorrecto — `` y `` superpuestos

El  se cierra mientras  sigue abierto dentro de él:

<p>
  <a href="/about"><i>About <strong>Us</i></strong></a>
</p>

Correcto — correctamente anidados

Cierra  primero, luego :

<p>
  <a href="/about"><i>About <strong>Us</strong></i></a>
</p>

Incorrecto — `` cruzando un límite de anchor

<p>
  <i><a href="/contact">Contact us</i></a> for more info.
</p>

Correcto — mantén `` completamente dentro o completamente fuera del enlace

<p>
  <a href="/contact"><i>Contact us</i></a> for more info.
</p>

Incorrecto — elementos en línea superpuestos con transición de estilo

Intentando hacer que “negrita cursiva” transicione a “solo negrita” superponiendo:

<p>
  <i>Italic and <b>bold-italic</i> then just bold.</b>
</p>

Correcto — cerrar y reabrir en el límite

<p>
  <i>Italic and <b>bold-italic</b></i><b> then just bold.</b>
</p>

Incorrecto — elemento de icono mal anidado con un span

<button>
  <i class="icon-search"><span class="sr-only">Search</i></span>
</button>

Correcto — cierra `` antes de ``

<button>
  <i class="icon-search"><span class="sr-only">Search</span></i>
</button>

Una forma rápida de verificar tu anidamiento es leer tus etiquetas de apertura en orden y luego confirmar que las etiquetas de cierre aparecen exactamente en el orden inverso. Si abriste <a>, , , la secuencia de cierre debe ser , , </a>. En caso de duda, usa la función de coincidencia de corchetes o resaltado de etiquetas de tu editor para rastrear visualmente cada par.