Verificação HTML: Tag de fecho "X" perdida.

Sobre este problema HTML

O analisador HTML processa as tags sequencialmente, mantendo uma pilha de elementos abertos. Quando encontra uma tag de fecho como </div>, procura por uma <div> aberta correspondente no âmbito atual. Se não existir nenhum elemento aberto correspondente, a tag de fecho é “perdida” — não tem para onde ir e viola a especificação HTML. Os navegadores ignoram silenciosamente as tags de fecho perdidas na maioria dos casos, mas a sua presença indica problemas estruturais na sua marcação que podem levar a problemas de renderização e layout imprevisíveis.

Este erro é importante por várias razões. Primeiro, as tags de fecho perdidas frequentemente indicam um problema estrutural mais profundo — se tem um </div> extra, o aninhamento do seu layout pode estar errado mesmo que o navegador o renderize de forma aceitável hoje. Segundo, as tecnologias de apoio como leitores de ecrã dependem da estrutura correta do documento para transmitir significado, e HTML malformado pode confundi-las. Terceiro, marcação limpa e válida é mais fácil de manter e depurar, especialmente em projetos colaborativos.

Existem várias causas comuns deste erro:

Tags de fecho duplicadas — A causa mais frequente. Você fecha acidentalmente o mesmo elemento duas vezes, por isso a segunda tag de fecho fica perdida.

Restos de copiar-colar — Ao mover ou eliminar blocos de HTML, uma tag de fecho fica para trás sem a sua tag de abertura correspondente.

Aninhamento incorreto — Os elementos estão incorretamente aninhados, causando que o analisador feche tags numa ordem inesperada e deixe tags de fecho órfãs.

Fechar elementos void — Elementos void como <br>, <img>, <hr>, e <input> nunca têm tags de fecho. Escrever </br> ou </img> produzirá este erro.

Para corrigir o problema, procure no seu documento pela tag de fecho perdida mencionada no erro, depois remova-a se for uma duplicata ou adicione/mova a tag de abertura correspondente se uma estiver em falta.

Exemplos

Tag de fecho duplicada

Este é o cenário mais comum — um elemento é fechado duas vezes:

<!-- ❌ Mau: </ul> duplicada -->

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

Remova a tag de fecho extra:

<!-- ✅ Bom -->

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

Sobra de copiar-colar

Após edição, uma tag de fecho permanece sem a sua contraparte de abertura:

<!-- ❌ Mau: </p> perdida sem <p> correspondente -->

<div>
  <h2>Título</h2>
  </p>
  <span>Algum texto</span>
</div>

Remova o </p> órfão:

<!-- ✅ Bom -->

<div>
  <h2>Título</h2>
  <span>Algum texto</span>
</div>

Aninhamento incorreto

Elementos incorretamente aninhados podem produzir tags de fecho perdidas:

<!-- ❌ Mau: </section> fecha antes de </div>, deixando </div> perdida -->

<section>
  <div>
    <p>Conteúdo aqui</p>
  </section>
  </div>

Corrija o aninhamento para que os elementos internos fechem antes dos externos:

<!-- ✅ Bom -->

<section>
  <div>
    <p>Conteúdo aqui</p>
  </div>
</section>

Fechar um elemento void

Elementos void não têm tag de fecho. Adicionar uma produz um erro de tag de fecho perdida:

<!-- ❌ Mau: <br> e <img> são elementos void -->

<p>Linha um<br></br>Linha dois</p>
<img src="foto.jpg" alt="Uma foto"></img>

Remova as tags de fecho para elementos void:

<!-- ✅ Bom -->

<p>Linha um<br>Linha dois</p>
<img src="foto.jpg" alt="Uma foto">

Múltiplas tags perdidas de um wrapper removido

Quando remove a tag de abertura de um elemento wrapper mas esquece a tag de fecho:

<!-- ❌ Mau: <main> foi removida mas </main> permanece -->

<body>
  <h1>Bem-vindo</h1>
  <p>Olá mundo</p>
  </main>
</body>

Remova o </main> perdido ou restaure a tag de abertura:

<!-- ✅ Bom: tag perdida removida -->

<body>
  <h1>Bem-vindo</h1>
  <p>Olá mundo</p>
</body>

<!-- ✅ Também bom: wrapper restaurado -->

<body>
  <main>
    <h1>Bem-vindo</h1>
    <p>Olá mundo</p>
  </main>
</body>

Ao lidar com HTML profundamente aninhado, usar indentação consistente e um editor com correspondência de parênteses/tags torna muito mais fácil detetar estes problemas antes de chegarem à validação. Muitos editores de código também destacam tags não correspondidas em tempo real.