Sobre este problema HTML
Quando o W3C HTML Validator reporta “No X element in scope but a X end tag seen”, significa que o parser encontrou uma etiqueta de fim para um elemento que nunca foi aberto, ou que já foi fechado. O validador acompanha quais elementos estão atualmente “no âmbito” — ou seja, quais etiquetas de abertura ainda estão à espera das suas etiquetas de fim correspondentes. Quando aparece uma etiqueta de fim que não corresponde a nenhum elemento aberto no âmbito, este erro é levantado.
Esta questão é importante por várias razões. Primeiro, indica HTML malformado que os browsers devem adivinhar como interpretar, potencialmente levando a renderização inconsistente entre diferentes browsers. Segundo, uma estrutura de documento quebrada pode confundir tecnologias assistivas como leitores de ecrã, prejudicando a acessibilidade. Terceiro, etiquetas de fim soltas podem inadvertidamente afetar a árvore DOM de formas inesperadas, fazendo com que o seu CSS e JavaScript se comportem de forma imprevisível.
Existem várias causas comuns:
- Fechar uma etiqueta duas vezes — a causa mais frequente, onde um erro de copiar-colar ou descuido leva a uma etiqueta de fim duplicada.
- Etiqueta de abertura em falta — a etiqueta de abertura correspondente foi acidentalmente eliminada ou nunca foi adicionada.
- Etiquetas mal aninhadas — os elementos sobrepõem-se em vez de estarem adequadamente aninhados, fazendo com que o browser feche automaticamente um elemento, o que torna uma etiqueta de fim posterior órfã.
-
Erros tipográficos em nomes de etiquetas — uma etiqueta de abertura tem um nome diferente da etiqueta de fim (por exemplo,
<div>aberto mas</dvi>usado para fechar, embora isto geralmente desencadeie um erro diferente).
Para corrigir isto, revise cuidadosamente o HTML em torno da linha assinalada. Trace cada etiqueta de fim de volta à sua etiqueta de abertura. Usar um editor de código com correspondência de parênteses/etiquetas pode tornar isto muito mais fácil. Remova quaisquer etiquetas de fim duplicadas, adicione quaisquer etiquetas de abertura em falta, ou corrija a ordem de aninhamento conforme necessário.
Exemplos
Fechar uma etiqueta duas vezes
Esta é a causa mais comum. A etiqueta </p> aparece duas vezes:
<!-- ❌ Mau: etiqueta de fim duplicada -->
<p>Hello world</p></p>Remova a etiqueta de fim extra:
<!-- ✅ Bom -->
<p>Hello world</p>Etiqueta de abertura em falta
Aqui uma etiqueta de fim </span> não tem um <span> correspondente:
<!-- ❌ Mau: nenhum <span> de abertura -->
<div>
Some text</span>
</div>Adicione a etiqueta de abertura em falta ou remova a etiqueta de fim solta:
<!-- ✅ Bom: etiqueta de abertura adicionada -->
<div>
<span>Some text</span>
</div>Etiquetas mal aninhadas
Quando os elementos se sobrepõem em vez de se aninharem adequadamente, o browser fecha automaticamente o elemento interior, deixando uma etiqueta de fim posterior órfã:
<!-- ❌ Mau: <b> e <i> sobrepõem-se -->
<p><b>Bold and <i>italic</b> text</i></p>
Neste caso, o browser fecha o <i> quando encontra </b> (uma vez que <i> está dentro de <b>), então o </i> posterior não tem nenhum elemento no âmbito. Corrija aninhando corretamente:
<!-- ✅ Bom: aninhamento adequado -->
<p><b>Bold and <i>italic</i></b> <i>text</i></p>Etiqueta de fim solta após elemento fechado automaticamente
Alguns elementos como <p> são automaticamente fechados por certas etiquetas subsequentes. Isto pode levar a etiquetas de fim órfãs:
<!-- ❌ Mau: <p> é fechado automaticamente por <div>, deixando </p> órfã -->
<p>Some text
<div>A block element</div>
</p>
O elemento <p> não pode conter um <div>, então o browser fecha implicitamente o <p> antes do <div>. O </p> final não tem então nenhum <p> no âmbito. Reestruture o markup:
<!-- ✅ Bom: elementos separados -->
<p>Some text</p>
<div>A block element</div>Dica: use ferramentas do editor
A maioria dos editores de código modernos pode destacar etiquetas de abertura e fim correspondentes. Se vir uma etiqueta de fim sem uma correspondência destacada, essa é provavelmente a fonte deste erro. Extensões para VS Code, Sublime Text, e outros editores também podem formatar automaticamente e validar o seu HTML enquanto escreve, detetando estas questões precocemente.
Encontre problemas como este automaticamente
O Rocket Validator analisa milhares de páginas em segundos, detetando problemas HTML em todo o seu site.