Verificação HTML: Tag de fecho X encontrada, mas existiam elementos abertos.

Sobre este problema HTML

O HTML segue um modelo de aninhamento rigoroso onde os elementos devem ser fechados por ordem last-in, first-out (LIFO). Pense nisso como empilhar caixas: deve fechar a caixa mais interna antes de poder fechar aquela que a contém. Quando escreve </li> mas um  dentro desse <li> ainda está aberto, o browser vê um conflito — está a tentar fechar o elemento externo enquanto um elemento interno está pendente.

Este erro ocorre tipicamente devido a uma destas situações:

Uma tag de fecho em falta para um elemento aninhado (por exemplo, esquecer-se de  dentro de um <li>).
Tags de fecho mal ordenadas onde acidentalmente fecha elementos na sequência errada.
Erros tipográficos em nomes de tags onde a tag de fecho pretendida não corresponde à tag de abertura, deixando o elemento real não fechado.

Embora os browsers usem algoritmos de recuperação de erro para adivinhar o que pretendia, diferentes browsers podem lidar com aninhamento malformado de forma diferente. Isto pode levar a renderização inconsistente, estilos quebrados e estruturas DOM inesperadas. Os leitores de ecrã e outras tecnologias assistivas dependem de uma árvore DOM bem formada, por isso aninhamento quebrado pode também causar problemas de acessibilidade. Manter o seu HTML adequadamente aninhado garante comportamento previsível em todos os browsers e ferramentas.

Como corrigir

Localize a linha referenciada no erro do validador. Dirá qual tag de fecho foi encontrada e quais elementos ainda estavam abertos.
Retroceda da tag de fecho para encontrar o elemento não fechado.
Adicione a tag de fecho em falta na posição correta, ou reordene as tags de fecho para que espelhem as tags de abertura em ordem inversa.
Re-valide para confirmar a correção, uma vez que um erro de aninhamento pode cascatear em múltiplos avisos.

Exemplos

❌ Tag de fecho em falta para um elemento aninhado

<ul>
  <li><span>Item um</li>
  <li>Item dois</li>
</ul>

O  dentro do primeiro <li> nunca é fechado. O validador vê </li> mas  ainda está aberto.

✅ Corrigido: feche o elemento interno primeiro

<ul>
  <li><span>Item um</span></li>
  <li>Item dois</li>
</ul>

❌ Tags de fecho mal ordenadas

<p>Isto é <strong><em>importante</strong></em> texto.</p>

Aqui  aparece antes de , mas  foi aberto dentro de , por isso  deve fechar primeiro.

✅ Corrigido: feche as tags em ordem inversa

<p>Isto é <strong><em>importante</em></strong> texto.</p>

❌ Múltiplos níveis de aninhamento quebrado

<div>
  <section>
    <p>Olá <a href="/">mundo</p>
  </section>
</div>

O elemento <a> nunca é fechado. A tag  é encontrada enquanto <a> ainda está aberto.

✅ Corrigido: feche a âncora antes do parágrafo

<div>
  <section>
    <p>Olá <a href="/">mundo</a></p>
  </section>
</div>

❌ Erro tipográfico numa tag de fecho causando incompatibilidade

<p>Clique <a href="/help">aqui</b> para ajuda.</p>

O fecho  não corresponde à abertura <a>, por isso o elemento <a> permanece aberto quando  é encontrado.

✅ Corrigido: use a tag de fecho correta

<p>Clique <a href="/help">aqui</a> para ajuda.</p>

Uma forma útil de evitar este erro é visualizar o seu HTML como um esboço — cada nível de indentação representa um nível de aninhamento, e as tags de fecho devem “desenrolar” em ordem inversa exata. Muitos editores de código também oferecem funcionalidades de correspondência de parênteses e tags que destacam tags incompatíveis ou não fechadas em tempo real.