Verificação HTML: A tag de fecho "i" viola as regras de aninhamento.

Sobre este problema HTML

HTML segue um modelo de aninhamento estrito baseado em stack. Quando abre um elemento, ele torna-se o elemento “atual”, e qualquer novo elemento que abrir torna-se um filho dele. As tags de fecho devem espelhar a ordem de abertura em sentido inverso. Quando o validador encontra  mas o elemento não fechado aberto mais recentemente é outra coisa — como , , , ou <a> — as regras de aninhamento são violadas porque o elemento  e o outro elemento estão sobrepostos em vez de um conter o outro.

Por exemplo, se escrever ........., os elementos  e  sobrepõem-se. O  tenta fechar enquanto  ainda está aberto dentro dele, e depois  tenta fechar fora de . Isto cria uma estrutura ambígua que nenhuma árvore DOM válida pode representar tal como está escrita. Os browsers tentarão “corrigir” isto usando algoritmos de recuperação de erro, mas o resultado pode diferir entre browsers e é improvável que corresponda à sua intenção.

Por que isto importa

Renderização imprevisível: A recuperação de erro do browser pode reestruturar silenciosamente o seu markup, levando a estilos em falta, links quebrados ou texto mal posicionado.
Acessibilidade: Os leitores de ecrã dependem de uma árvore DOM bem formada. Elementos mal aninhados podem fazer com que a tecnologia assistiva interprete mal a estrutura, lendo conteúdo fora de ordem ou perdendo totalmente pistas de ênfase.
Manutenibilidade: Tags sobrepostas tornam o código mais difícil de ler e depurar. Futuras edições têm mais probabilidade de introduzir erros adicionais.

Causas comuns

Elementos inline sobrepostos: Abrir  e depois  (ou , , , etc.) mas fechar  antes de .
Tags que cruzam um limite de âncora: Começar  fora de um elemento <a> mas fechá-lo dentro, ou vice-versa.
Erros de copiar-colar: Duplicar um bloco de HTML que inclui ícones (ex., tags  do Font Awesome) ou elementos  apenas para leitores de ecrã, depois editar parte dele sem corrigir a ordem das tags.
Misturar markup apresentacional e semântico: Envolver  à volta de conteúdo que já contém  ou , depois fechar acidentalmente na sequência errada.

Como corrigir

Identifique o par sobreposto. A mensagem do validador normalmente aponta para a linha onde  aparece. Procure o elemento não fechado mais próximo que foi aberto depois de .
Reordene as tags de fecho para que espelhem a ordem de abertura em sentido inverso. Se abriu  depois , feche  depois .
Se a sobreposição é intencional (ex., quer texto negrito-itálico que transiciona para apenas negrito), reestruture fechando e reabrindo elementos no limite em vez de os sobrepor.
Considere alternativas semânticas. O elemento  é para texto idiomático (termos técnicos, frases estrangeiras, pensamentos). Se precisa de ênfase, use . Se só precisa de estilo itálico, use CSS font-style: italic;. Qualquer que seja o elemento que escolher, as regras de aninhamento são as mesmas.

Exemplos

Incorreto — `` e `` sobrepostos

O  fecha enquanto  ainda está aberto dentro dele:

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

Correto — adequadamente aninhado

Feche  primeiro, depois :

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

Incorreto — `` atravessando um limite de âncora

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

Correto — mantenha `` totalmente dentro ou totalmente fora do link

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

Incorreto — elementos inline sobrepostos com uma transição de estilo

Tentando fazer “negrito itálico” transicionar para “apenas negrito” sobrepondo:

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

Correto — feche e reabra no limite

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

Incorreto — elemento de ícone mal aninhado com um span

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

Correto — feche `` antes de ``

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

Uma maneira rápida de verificar o seu aninhamento é ler as suas tags de abertura por ordem e depois confirmar que as tags de fecho aparecem exatamente na ordem inversa. Se abriu <a>, , , a sequência de fecho deve ser , , </a>. Em caso de dúvida, use a funcionalidade de correspondência de parênteses ou destaque de tags do seu editor para rastrear visualmente cada par.