Sobre este problema HTML
Quando o browser encontra uma tag </body> enquanto elementos como <div>, <section>, <p>, ou <span> ainda estão abertos, deve adivinhar onde esses elementos deveriam terminar. Diferentes browsers podem adivinhar de forma diferente, levando a renderização inconsistente e uma estrutura DOM que não corresponde à sua intenção. Isto pode causar problemas de layout, styling quebrado, e problemas de acessibilidade — os leitores de ecrã dependem de um DOM bem formado para transmitir a estrutura correta do documento aos utilizadores.
As causas raiz deste erro incluem tipicamente:
- Esquecer uma tag de fechamento — o cenário mais comum, especialmente com estruturas profundamente aninhadas.
-
Tags não correspondentes — tags de fechamento que não correspondem às suas tags de abertura (por exemplo, abrir um
<div>mas fechá-lo com</section>). - Erros de copiar-colar — duplicar ou eliminar código que deixa para trás tags de abertura órfãs.
- Aninhamento incorreto — elementos sobrepostos onde as tags cruzam fronteiras em vez de estarem devidamente aninhadas.
Para corrigir o problema, trabalhe através da lista de erros do validador de cima para baixo. A mensagem de erro geralmente identifica quais elementos não estão fechados. Encontre cada um e adicione a tag de fechamento em falta na posição correta ou remova a tag de abertura desnecessária. Usar indentação consistente torna muito mais fácil identificar incompatibilidades visualmente.
Exemplos
Tag de fechamento em falta
Isto desencadeia o erro porque o elemento <section> nunca é fechado:
<body>
<section>
<h1>Welcome</h1>
<p>Hello, world!</p>
</body>
Adicione a tag de fechamento </section> em falta:
<body>
<section>
<h1>Welcome</h1>
<p>Hello, world!</p>
</section>
</body>Múltiplos elementos não fechados
Aqui, tanto o <div> quanto o <ul> ficaram abertos:
<body>
<div class="sidebar">
<ul>
<li>Home</li>
<li>About</li>
</body>Feche cada elemento na ordem correta (inversa):
<body>
<div class="sidebar">
<ul>
<li>Home</li>
<li>About</li>
</ul>
</div>
</body>Tag de fechamento não correspondente
Uma incompatibilidade entre tags de abertura e fechamento também pode produzir este erro. O <div> é aberto mas </section> é usado para o fechar, deixando o <div> não fechado:
<body>
<div class="content">
<p>Some text here.</p>
</section>
</body>Corrija a tag de fechamento para que corresponda à tag de abertura:
<body>
<div class="content">
<p>Some text here.</p>
</div>
</body>Elementos sobrepostos (incorretamente aninhados)
Elementos que se sobrepõem em vez de se aninharem adequadamente também vão desencadear este erro. Aqui as tags <b> e <i> cruzam as fronteiras uma da outra:
<body>
<p><b>Bold and <i>italic</b> text</i></p>
</body>Assegure-se de que os elementos são fechados na ordem inversa à que foram abertos:
<body>
<p><b>Bold and <i>italic</i></b><i> text</i></p>
</body>Encontre problemas como este automaticamente
O Rocket Validator analisa milhares de páginas em segundos, detetando problemas HTML em todo o seu site.