Validación HTML: La etiqueta de cierre "code" viola las reglas de anidación.

Acerca de este problema HTML

El elemento <code> es un elemento de nivel inline (contenido de fraseo) diseñado para representar un fragmento de código informático. Según la especificación HTML, solo puede contener otro contenido de fraseo — elementos como <span>, <em>, <strong>, <a>, y nodos de texto. No puede contener elementos de nivel de bloque (contenido de flujo) como <div>, <p>, <ul>, <h1>–<h6>, o <table>.

Cuando el validador reporta que una etiqueta de cierre </code> viola las reglas de anidación, significa que una de estas dos cosas está ocurriendo:

Contenido no permitido dentro de <code>: Se ha colocado un elemento de nivel de bloque dentro del elemento <code>. Cuando el navegador encuentra un elemento de nivel de bloque donde solo se permite contenido de fraseo, puede cerrar implícitamente el elemento <code>. La subsiguiente etiqueta de cierre </code> entonces no tiene una etiqueta de apertura correspondiente, causando la violación de anidación.
Etiquetas superpuestas o mal anidadas: Las etiquetas dentro de <code> están incorrectamente superpuestas, lo que significa que un elemento abierto dentro de <code> se cierra fuera de él, o viceversa.

Esto importa por varias razones. Los navegadores intentarán “arreglar” el anidación roto reorganizando el DOM de maneras que puede que no esperes, llevando a renderizado y estilos inconsistentes. Los lectores de pantalla y otras tecnologías asistivas dependen de un árbol DOM bien formado, así que el anidación roto puede dañar la accesibilidad. Adicionalmente, otros errores del validador en tu documento pueden ser consecuencia de este único problema de anidación, así que arreglarlo puede resolver múltiples advertencias de una vez.

Al depurar este error, mira otros errores de validación reportados cerca de la misma línea. A menudo, un error previo — como una etiqueta no cerrada o un elemento de bloque inesperado — es la causa raíz, y la violación de anidación </code> es una consecuencia derivada.

Ejemplos

❌ Elemento de nivel de bloque dentro de `<code>`

Colocar un <div> dentro de <code> viola el modelo de contenido. El navegador cierra implícitamente <code> antes del <div>, dejando la etiqueta de cierre </code> huérfana.

<p>Ejemplo: <code>algo de texto <div>contenido de bloque</div> más texto</code></p>

✅ Usa solo contenido de fraseo dentro de `<code>`

Reemplaza el elemento de nivel de bloque con una alternativa inline como <span>:

<p>Ejemplo: <code>algo de texto <span>contenido inline</span> más texto</code></p>

❌ Etiquetas superpuestas con `<code>`

Aquí, <em> se abre dentro de <code> pero se cierra después de </code>, creando una superposición:

<p>Ver <code>myFunction(<em>arg</code>)</em> para detalles.</p>

✅ Etiquetas correctamente anidadas

Asegúrate de que cada elemento abierto dentro de <code> también se cierre dentro de él:

<p>Ver <code>myFunction(<em>arg</em>)</code> para detalles.</p>

❌ Párrafo dentro de `<code>`

Un elemento <p> no está permitido dentro de <code>:

<code>
  <p>Primera línea de código</p>
  <p>Segunda línea de código</p>
</code>

✅ Usa `<pre><code>` para bloques de código multilínea

Para código multilínea, envuelve <code> dentro de un elemento <pre> y usa saltos de línea en lugar de párrafos:

<pre><code>Primera línea de código
Segunda línea de código</code></pre>

❌ Lista dentro de `<code>`

<code>
  <ul>
    <li>paso uno</li>
    <li>paso dos</li>
  </ul>
</code>

✅ Separa la lista del marcado de código

Usa <code> individualmente alrededor de las porciones de código inline:

<ul>
  <li><code>paso uno</code></li>
  <li><code>paso dos</code></li>
</ul>

Cómo arreglar

Encuentra la línea referenciada por el error del validador y mira qué hay dentro del elemento <code>.
Verifica elementos de nivel de bloque como <div>, <p>, <ul>, <table>, o encabezados anidados dentro de <code>. Reemplázalos con alternativas de contenido de fraseo o reestructura tu marcado.
Verifica etiquetas superpuestas donde un elemento iniciado dentro de <code> se cierra fuera de él (o al revés). Asegúrate de que cada etiqueta abierta dentro de <code> se cierre dentro de él.
Revisa errores relacionados en la salida del validador. A menudo, arreglar un error anterior de anidación o etiqueta no cerrada resolverá la violación </code> automáticamente.