Verificação HTML: Tag de início perdido "div".

Sobre este problema HTML

O parser HTML segue regras rigorosas sobre onde os elementos podem aparecer. Quando encontra um <div> numa localização inesperada, reporta-o como um tag de início “perdido”. O parser pode tentar recuperação de erro — frequentemente ignorando o tag ou movendo-o — mas a árvore DOM resultante pode não corresponder às suas intenções, levando a layouts quebrados ou conteúdo em falta.

Existem várias causas comuns deste erro:

Colocação após </body> ou </html>: Todo o conteúdo visível deve estar dentro do elemento <body>. Qualquer <div> que apareça após </body> ou </html> está perdido porque a estrutura do documento já foi fechada.

Dentro de elementos com modelos de conteúdo restritos: Elementos como <table>, <ul>, <ol>, e <select> apenas permitem elementos filhos específicos. Um <div> colocado diretamente dentro de uma <table> (fora de <thead>, <tbody>, <tfoot>, <tr>, <td>, ou <th>) ou diretamente dentro de uma <ul> (que apenas permite filhos <li>) irá desencadear este erro.

Tags de fecho em falta: Se se esquecer de fechar um elemento como </td>, </li>, ou </p>, o parser pode fechá-lo implicitamente num ponto que deixa o seu <div> órfão num contexto inválido. Esta é uma das causas mais complicadas porque o próprio <div> parece estar bem — o verdadeiro problema está noutro lugar.

Por que isto é importante: Para além da conformidade com as normas, um elemento perdido pode fazer com que os navegadores construam um DOM inesperado. Isto pode quebrar layouts CSS, fazer com que seletores JavaScript falhem, e criar problemas de acessibilidade onde as tecnologias assistivas interpretam mal a estrutura da página.

Exemplos

`<div>` perdido após o tag de fecho `</html>`

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Test</title>
</head>
<body>
  <p>Main content</p>
</body>
</html>
<div>
  Some extra content
</div>

O <div> aparece após o documento ter sido completamente fechado. Mova-o para dentro de <body>:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Test</title>
</head>
<body>
  <p>Main content</p>
  <div>
    Some extra content
  </div>
</body>
</html>

`<div>` perdido dentro de uma `<table>`

<table>
  <div class="wrapper">
    <tr>
      <td>Data</td>
    </tr>
  </div>
</table>

Uma <table> não permite <div> como filho direto. Remova o <div> ou reestruture:

<div class="wrapper">
  <table>
    <tr>
      <td>Data</td>
    </tr>
  </table>
</div>

`<div>` perdido dentro de uma `<ul>`

<ul>
  <div class="group">
    <li>Item 1</li>
    <li>Item 2</li>
  </div>
</ul>

Uma <ul> apenas aceita elementos <li> como filhos diretos. Coloque o <div> dentro de cada <li>, ou envolva a lista inteira:

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

`<div>` perdido causado por um tag de fecho em falta

<table>
  <tr>
    <td>Cell content
  </tr>
</table>
<div>More content</div>

O </td> em falta pode causar confusão no parser que faz com que o <div> apareça perdido em alguns contextos. Feche sempre os seus tags explicitamente:

<table>
  <tr>
    <td>Cell content</td>
  </tr>
</table>
<div>More content</div>

Como depurar

Se a localização do erro não for óbvia, trabalhe através destes passos:

Verifique o número da linha reportado pelo validador e veja em que elemento o <div> está aninhado.
Procure por tags de fecho em falta acima da linha sinalizada — um </td>, </li>, </div>, ou </p> em falta é frequentemente o verdadeiro culpado.
Verifique o modelo de conteúdo do elemento pai — verifique se esse pai é permitido conter um <div> consultando a referência de elementos MDN.
Use as DevTools do seu navegador para inspecionar o DOM real. Se o navegador moveu ou removeu o seu <div>, a árvore DOM irá diferir do seu HTML fonte, ajudando-o a identificar onde o parser perdeu a sincronização.