Verificação HTML: Elemento "X" não fechado.

Sobre este problema HTML

Quando o validador reporta “Elemento ‘X’ não fechado”, significa que uma etiqueta de abertura como <div> ou <p> nunca foi terminada com a sua etiqueta de fecho obrigatória </div> ou </p>, ou foi fechada fora de ordem. O parsing HTML então tenta fechar automaticamente os elementos, o que pode remodelar o DOM de formas que você não pretendia. Isto acontece frequentemente com estruturas aninhadas, edições de copiar-colar, ou quando se misturam elementos vazios (que nunca têm etiquetas de fecho) com elementos normais.

Deixar elementos não fechados pode quebrar o layout e estilos, confundir tecnologias assistivas que dependem de uma estrutura bem formada, e fazer com que scripts ou seletores CSS se comportem de forma imprevisível. Também prejudica a portabilidade entre navegadores e ferramentas, e torna a manutenção mais difícil porque a árvore renderizada difere do que o código fonte sugere.

Para corrigir isto, certifique-se de que:

Todos os elementos não vazios têm uma etiqueta de fecho correspondente: abra <section>, feche com </section>.
O aninhamento está adequadamente equilibrado: o último elemento aberto é o primeiro que você fecha (LIFO).
Você não adiciona etiquetas de fecho a elementos vazios como br, img, input, meta, link, ou hr. Estes não devem ter etiquetas de fecho em HTML, e você não precisa de uma barra final.
A sintaxe de fecho automático (<br />) é permitida mas tratada como <br> em HTML; não dependa dela para fechar elementos não vazios.
Use o emparelhamento de parênteses/etiquetas do seu editor ou formatador para detetar incompatibilidades, e valide cedo.

Exemplos

Exemplo que desencadeia o problema (elemento não fechado)

<!-- Problema: <div> nunca é fechado, e <p> é fechado depois de um novo <div> começar -->

<div class="card">
  <h2>Title</h2>
  <p>Some text
<div class="footer">
  <p>Footer text</p>
</div>

Corrigido: devidamente fechado e corretamente aninhado

<div class="card">
  <h2>Title</h2>
  <p>Some text</p>
  <div class="footer">
    <p>Footer text</p>
  </div>
</div>

Exemplo que desencadeia o problema (fecho fora de ordem)

<!-- Problema: <em> é aberto dentro de <strong> mas fechado depois de </strong> -->

<p><strong><em>Important</strong></em> notice</p>

Corrigido: feche na ordem inversa de abertura

<p><strong><em>Important</em></strong> notice</p>

Exemplo que desencadeia o problema (“fechamento” incorreto de um elemento vazio)

<!-- Problema: elementos vazios não devem ter etiquetas de fecho -->

<p>Line one</p>
<br></br>
<p>Line two</p>

Corrigido: use elementos vazios sem etiquetas de fecho

<p>Line one</p>
<br>
<p>Line two</p>

Exemplo de documento completo com uma armadilha comum (listas e parágrafos)

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Unclosed Element Fix</title>
  </head>
  <body>
<!-- Problema evitado: não aninhe <li> através de limites de parágrafos -->

    <ul>
      <li>
        <p>Item one title</p>
        <p>Item one details</p>
      </li>
      <li>
        <p>Item two</p>
      </li>
    </ul>
  </body>
</html>

Dicas para prevenir erros de “Elemento não fechado”

Mantenha a indentação consistente; ela reflete visualmente o aninhamento.
Feche as etiquetas imediatamente após abrir, depois preencha o conteúdo.
Use linters/formatadores (ex: HTMLHint, Prettier) e execute o validador W3C regularmente.
Seja cauteloso ao misturar lógica de templates; certifique-se de que condicionais não saltam etiquetas de fecho obrigatórias.