Verificação HTML: Tag de fecho "code" viola as regras de aninhamento.

Sobre este problema HTML

O elemento <code> é um elemento de nível inline (conteúdo de fraseado) desenhado para representar um fragmento de código de computador. De acordo com a especificação HTML, pode apenas conter outro conteúdo de fraseado — elementos como <span>, <em>, <strong>, <a>, e nós de texto. Não pode conter elementos de nível de bloco (conteúdo de fluxo) como <div>, <p>, <ul>, <h1>–<h6>, ou <table>.

Quando o validador reporta que um tag de fecho </code> viola as regras de aninhamento, significa que uma de duas coisas está a acontecer:

Conteúdo não permitido dentro de <code>: Um elemento de nível de bloco foi colocado dentro do elemento <code>. Quando o browser encontra um elemento de nível de bloco onde apenas conteúdo de fraseado é permitido, pode implicitamente fechar o elemento <code>. O subsequente tag de fecho </code> fica então sem tag de abertura correspondente, causando a violação de aninhamento.
Tags sobrepostos ou mal aninhados: Tags dentro de <code> estão incorretamente sobrepostos, significando que um elemento aberto dentro de <code> é fechado fora dele, ou vice-versa.

Isto é importante por várias razões. Os browsers tentarão “corrigir” o aninhamento quebrado reorganizando o DOM de formas que você pode não esperar, levando a renderização e estilos inconsistentes. Leitores de ecrã e outras tecnologias assistivas dependem de uma árvore DOM bem formada, pelo que aninhamento quebrado pode prejudicar a acessibilidade. Adicionalmente, outros erros de validador no seu documento podem resultar deste único problema de aninhamento, pelo que corrigi-lo pode resolver múltiplos avisos de uma só vez.

Ao depurar este erro, observe outros erros de validação reportados perto da mesma linha. Frequentemente, um erro anterior — como um tag não fechado ou um elemento de bloco inesperado — é a causa raiz, e a violação de aninhamento </code> é uma consequência subsequente.

Exemplos

❌ Elemento de nível de bloco dentro de `<code>`

Colocar um <div> dentro de <code> viola o modelo de conteúdo. O browser fecha implicitamente <code> antes do <div>, deixando o tag de fecho </code> órfão.

<p>Exemplo: <code>algum texto <div>conteúdo de bloco</div> mais texto</code></p>

✅ Use apenas conteúdo de fraseado dentro de `<code>`

Substitua o elemento de nível de bloco por uma alternativa inline como <span>:

<p>Exemplo: <code>algum texto <span>conteúdo inline</span> mais texto</code></p>

❌ Tags sobrepostos com `<code>`

Aqui, <em> é aberto dentro de <code> mas fechado após </code>, criando uma sobreposição:

<p>Veja <code>myFunction(<em>arg</code>)</em> para detalhes.</p>

✅ Tags adequadamente aninhados

Garanta que cada elemento aberto dentro de <code> é também fechado dentro dele:

<p>Veja <code>myFunction(<em>arg</em>)</code> para detalhes.</p>

❌ Parágrafo dentro de `<code>`

Um elemento <p> não é permitido dentro de <code>:

<code>
  <p>Primeira linha de código</p>
  <p>Segunda linha de código</p>
</code>

✅ Use `<pre><code>` para blocos de código multi-linha

Para código multi-linha, envolva <code> dentro de um elemento <pre> e use quebras de linha em vez de parágrafos:

<pre><code>Primeira linha de código
Segunda linha de código</code></pre>

❌ Lista dentro de `<code>`

<code>
  <ul>
    <li>passo um</li>
    <li>passo dois</li>
  </ul>
</code>

✅ Separe a lista da marcação de código

Use <code> individualmente em volta das porções de código inline:

<ul>
  <li><code>passo um</code></li>
  <li><code>passo dois</code></li>
</ul>

Como corrigir

Encontre a linha referenciada pelo erro do validador e observe o que está dentro do elemento <code>.
Verifique elementos de nível de bloco como <div>, <p>, <ul>, <table>, ou cabeçalhos aninhados dentro de <code>. Substitua-os por alternativas de conteúdo de fraseado ou reestruture a sua marcação.
Verifique tags sobrepostos onde um elemento iniciado dentro de <code> é fechado fora dele (ou o contrário). Certifique-se de que cada tag aberto dentro de <code> é fechado dentro dele.
Reveja erros relacionados na saída do validador. Frequentemente, corrigir um erro anterior de aninhamento ou tag não fechado resolverá automaticamente a violação </code>.