Verificação HTML: A etiqueta de fecho X não corresponde ao nome do elemento aberto atual Y.

Sobre este problema HTML

O HTML segue regras rigorosas de aninhamento: os elementos devem ser fechados na ordem inversa à que foram abertos, como uma pilha. Quando o validador encontra </X> mas o elemento aberto atual é Y, significa que algo correu mal na estrutura do documento. O parser do navegador tentará recuperar desta incompatibilidade, mas o resultado pode não refletir o layout ou semântica que pretendia.

Existem várias causas comuns para este erro:

Erros tipográficos nos nomes das etiquetas — por exemplo, abrir uma <div> mas fechá-la com </dvi>.
Etiquetas não correspondentes — abrir um elemento mas fechar um diferente, como <strong> fechado com </em>.
Ordem de aninhamento incorreta — elementos sobrepostos onde as etiquetas cruzam limites em vez de estarem adequadamente aninhadas.
Etiquetas de fecho em falta — uma etiqueta de fecho esquecida causa o desalinhamento das etiquetas de fecho subsequentes com a expetativa do parser.

Isto é importante porque HTML inadequadamente aninhado pode causar renderização imprevisível entre navegadores, quebrar o styling CSS, interferir com a manipulação DOM do JavaScript, e criar problemas de acessibilidade para leitores de ecrã que dependem de uma árvore de documento bem formada.

Para corrigir este erro, retrace a partir da linha reportada para encontrar onde a incompatibilidade tem origem. Certifique-se de que cada etiqueta de abertura tem uma etiqueta de fecho correspondente com exatamente o mesmo nome, e que os elementos são fechados na ordem correta (último aberto, primeiro fechado).

Exemplos

Erro tipográfico na etiqueta de fecho

<!-- ❌ Errado: etiqueta de fecho mal escrita -->

<section>
  <p>Hello world</p>
</secton>

<!-- ✅ Corrigido: etiqueta de fecho corresponde à etiqueta de abertura -->

<section>
  <p>Hello world</p>
</section>

Etiquetas não correspondentes

<!-- ❌ Errado: <strong> é fechado com </em> -->

<p>This is <strong>important</em> text.</p>

<!-- ✅ Corrigido: etiqueta de fecho corresponde à etiqueta de abertura -->

<p>This is <strong>important</strong> text.</p>

Elementos incorretamente aninhados (sobrepostos)

<!-- ❌ Errado: <b> e <i> sobrepõem-se -->

<p><b>Bold <i>and italic</b> text</i></p>

O validador vê </b> quando o elemento aberto atual é <i>. Os elementos devem aninhar-se completamente uns dentro dos outros sem se sobreporem.

<!-- ✅ Corrigido: elementos estão adequadamente aninhados -->

<p><b>Bold <i>and italic</i></b><i> text</i></p>

Etiqueta de fecho em falta causando uma cascata de erros

<!-- ❌ Errado: falta </div> para o div interno -->

<div class="outer">
  <div class="inner">
    <p>Content</p>
</div>

Aqui o único </div> fecha inner, deixando outer não fechado. Se mais HTML seguir, as etiquetas de fecho subsequentes ficarão desalinhadas, potencialmente produzindo este erro mais abaixo no documento.

<!-- ✅ Corrigido: ambos os divs estão adequadamente fechados -->

<div class="outer">
  <div class="inner">
    <p>Content</p>
  </div>
</div>

Dicas para debugging

Trabalhe a partir do primeiro erro — na validação HTML, um erro precoce pode causar uma cascata de muitos erros subsequentes. Corrija a primeira incompatibilidade reportada e revalide antes de abordar erros posteriores.
Use indentação consistente — código adequadamente indentado torna muito mais fácil identificar onde o aninhamento falha.
Use um editor com correspondência de parênteses/etiquetas — a maioria dos editores de código pode destacar etiquetas de abertura e fecho correspondentes, tornando as incompatibilidades imediatamente visíveis.