Sobre este problema HTML
O HTML segue um modelo de aninhamento rigoroso onde os elementos devem estar adequadamente contidos uns nos outros. Quando abre um elemento <strong> e depois abre outro elemento dentro dele (como um <a>, <em>, ou <span>), deve fechar primeiro o elemento interno antes de fechar </strong>. Fechar tags fora de ordem cria elementos sobrepostos, o que viola a especificação HTML.
Isto é importante por várias razões importantes. Primeiro, os navegadores têm de adivinhar como interpretar markup inadequadamente aninhado, e diferentes navegadores podem resolver a ambiguidade de forma diferente, levando a renderização inconsistente. Segundo, tecnologias assistivas como leitores de ecrã dependem de uma árvore de documento bem formada para transmitir a estrutura e ênfase corretas aos utilizadores. Tags sobrepostas produzem uma árvore DOM quebrada que pode confundir estas ferramentas. Terceiro, a especificação HTML da WHATWG define explicitamente o modelo de parsing como uma estrutura em árvore — os elementos não podem sobrepor-se parcialmente porque um nó da árvore só pode ter um pai.
A correção é direta: feche sempre os elementos na ordem inversa à que foram abertos. Pense nisso como uma regra “último aberto, primeiro fechado”. Se <strong> for aberto primeiro e <a> for aberto segundo, então </a> deve vir antes de </strong>.
Exemplos
Incorreto: tags sobrepostas
A tag </strong> fecha antes da tag <a> interna, violando as regras de aninhamento:
<p><strong><a href="/about">Sobre nós</strong></a></p>Correto: tags adequadamente aninhadas
O elemento <a> está completamente fechado antes de </strong>:
<p><strong><a href="/about">Sobre nós</a></strong></p>Incorreto: múltiplos elementos aninhados fechados fora de ordem
Aqui <strong> sobrepõe-se com <em> e <a>:
<p><strong><em><a href="#">Saber mais</strong></em></a></p>Correto: fechar em ordem inversa
Cada tag é fechada na ordem exatamente inversa à que foi aberta:
<p><strong><em><a href="#">Saber mais</a></em></strong></p>Incorreto: strong abrangendo limites de elementos de bloco
Por vezes a violação de aninhamento ocorre quando <strong> envolve itens de lista ou outras estruturas:
<ul>
<li><strong>Primeiro item</li>
<li>Segundo item</strong></li>
</ul>Correto: aplicar strong dentro de cada elemento individualmente
Mantenha <strong> completamente contido dentro de cada <li>:
<ul>
<li><strong>Primeiro item</strong></li>
<li><strong>Segundo item</strong></li>
</ul>Uma forma útil de detetar estas questões é rastrear visualmente as suas tags de abertura e fecho — se desenhar linhas conectando cada par, as linhas nunca se devem cruzar. Se se cruzarem, tem uma violação de aninhamento que precisa de ser reordenada.
Encontre problemas como este automaticamente
O Rocket Validator analisa milhares de páginas em segundos, detetando problemas HTML em todo o seu site.