Sobre este problema HTML
O HTML segue regras de aninhamento rigorosas: quando um elemento é aberto dentro de outro, o elemento interno deve ser fechado antes do externo. Isto é por vezes chamado o princípio “último aberto, primeiro fechado”. Quando uma tag de fecho </b> aparece enquanto outro elemento que foi aberto dentro do <b> ainda está aberto, o validador reporta esta violação de aninhamento.
Isto importa por várias razões. Primeiro, os navegadores devem adivinhar o que você pretendia quando encontram tags incorretamente aninhadas, e diferentes navegadores podem interpretar a estrutura de forma diferente, levando a renderização inconsistente. Segundo, tecnologias assistivas como leitores de ecrã dependem de uma árvore DOM bem formada para transmitir o significado e estrutura corretos do conteúdo aos utilizadores. Tags mal aninhadas podem produzir uma experiência confusa ou quebrada. Terceiro, elementos incorretamente aninhados podem causar comportamento inesperado com estilos CSS, uma vez que a árvore DOM computada pode não corresponder ao que você escreveu no seu código fonte.
A correção é direta: feche sempre os elementos na ordem exata inversa à qual os abriu. Se <b> é aberto primeiro e <a> é aberto segundo, então </a> deve vir antes de </b>.
Exemplos
Incorreto: <b> fechado antes de um <a> aninhado
<p><b><a href="/about">About us</b></a></p>
Aqui, o elemento <a> foi aberto dentro do <b>, mas </b> aparece antes de </a>. Isto viola as regras de aninhamento.
Correto: elemento interno fechado primeiro
<p><b><a href="/about">About us</a></b></p>
O <a> é fechado primeiro, depois o <b>, respeitando a ordem na qual foram abertos.
Incorreto: múltiplas violações de aninhamento
<p><b><em><a href="#">Click here</b></em></a></p>
Três elementos são abertos (<b>, depois <em>, depois <a>), mas são fechados na ordem errada.
Correto: fecho adequado em ordem inversa
<p><b><em><a href="#">Click here</a></em></b></p>
Os elementos fecham em ordem inversa: </a> primeiro, depois </em>, depois </b>.
Incorreto: <b> sobrepondo-se com um elemento de nível de bloco
<b><p>Bold paragraph</b></p>
Para além do problema de ordem de aninhamento, note que <b> é um elemento de fraseado (inline) e não deve envolver <p> (um elemento de fluxo/bloco). Esta é uma violação separada mas relacionada.
Correto: <b> dentro do parágrafo
<p><b>Bold paragraph</b></p>
O elemento <b> está agora adequadamente colocado dentro do <p>, e a ordem de aninhamento está correta.
Um modelo mental útil
Pense no aninhamento HTML como parênteses na matemática. Cada abertura deve ter um fecho correspondente, e não podem cruzar-se:
Errado: ( [ ) ]
Correto: ( [ ] )Traduzindo para HTML:
<!-- Errado -->
<b><em>text</b></em>
<!-- Correto -->
<b><em>text</em></b>Se está a trabalhar com markup complexa ou profundamente aninhada, usar um editor de código com tags de fecho automático e correspondência de parênteses pode ajudá-lo a detetar estes problemas antes de chegarem ao validador.
Encontre problemas como este automaticamente
O Rocket Validator analisa milhares de páginas em segundos, detetando problemas HTML em todo o seu site.