Sobre este problema HTML
Quando o parser HTML encontra uma tag de fecho </li>, espera que todos os elementos aninhados dentro desse item de lista já estejam fechados. Se algum elemento filho permanecer em aberto, o navegador tem de adivinhar onde o fechar, o que pode levar a uma estrutura DOM inesperada. Este erro ocorre tipicamente quando uma tag de fecho é acidentalmente omitida, mal escrita, ou colocada na ordem errada.
Isto é importante por várias razões. Primeiro, os navegadores podem interpretar a estrutura pretendida de forma diferente, causando renderização inconsistente entre plataformas. Segundo, tecnologias assistivas como leitores de ecrã dependem de um DOM bem formado para transmitir o conteúdo corretamente — elementos não fechados podem confundir a ordem de leitura ou o agrupamento do conteúdo. Terceiro, elementos não fechados podem causar outros erros de validação em cascata, tornando mais difícil identificar os problemas reais na sua marcação.
Causas comuns deste erro incluem:
-
Esquecer-se de fechar um elemento inline como
<span>,<a>,<strong>, ou<em>dentro de um item de lista. -
Esquecer-se de fechar um elemento de nível de bloco como
<div>ou<p>dentro de um item de lista. - Aninhar elementos na ordem errada, para que as tags de fecho não correspondam às suas tags de abertura.
-
Erros tipográficos nas tags de fecho (p.ex.,
</sapn>em vez de</span>).
Para corrigir o problema, localize o <li> mencionado no erro e verifique todos os elementos abertos dentro dele. Certifique-se de que cada um tem uma tag de fecho correspondente e corretamente escrita, e que são fechados na ordem inversa à que foram abertos (último aberto, primeiro fechado).
Exemplos
Tag de fecho em falta num elemento inline
❌ Inválido: O <span> nunca é fechado antes do </li>.
<ul>
<li>
<span>Texto de exemplo
</li>
</ul>
✅ Válido: O <span> está adequadamente fechado.
<ul>
<li>
<span>Texto de exemplo</span>
</li>
</ul>Tag de fecho em falta numa ligação
❌ Inválido: O elemento <a> fica em aberto.
<ul>
<li>
<a href="/about">Sobre nós
</li>
<li>
<a href="/contact">Contacto</a>
</li>
</ul>
✅ Válido: Ambos os elementos <a> são fechados antes do seu </li> pai.
<ul>
<li>
<a href="/about">Sobre nós</a>
</li>
<li>
<a href="/contact">Contacto</a>
</li>
</ul>Múltiples elementos aninhados não fechados
❌ Inválido: Tanto <strong> como <a> ficam em aberto dentro do <li>.
<ol>
<li>
<a href="/sale"><strong>Grande saldo
</li>
</ol>✅ Válido: Os elementos aninhados são fechados por ordem inversa (mais interno primeiro).
<ol>
<li>
<a href="/sale"><strong>Grande saldo</strong></a>
</li>
</ol>Tag de fecho mal escrita
❌ Inválido: A tag de fecho </sapn> não corresponde a <span>, portanto o <span> permanece em aberto.
<ul>
<li>
<span>Item um</sapn>
</li>
</ul>✅ Válido: A tag de fecho está corretamente escrita.
<ul>
<li>
<span>Item um</span>
</li>
</ul>Tags de fecho ordenadas incorretamente
❌ Inválido: As tags </em> e </strong> são fechadas na ordem errada, deixando <em> efetivamente não fechado quando </strong> é encontrado.
<ul>
<li>
<strong><em>Nota importante</strong></em>
</li>
</ul>✅ Válido: As tags de fecho estão na ordem reversa correta.
<ul>
<li>
<strong><em>Nota importante</em></strong>
</li>
</ul>Encontre problemas como este automaticamente
O Rocket Validator analisa milhares de páginas em segundos, detetando problemas HTML em todo o seu site.