Validación HTML: Etiqueta de inicio "div" perdida.

Acerca de este problema HTML

El analizador HTML sigue reglas estrictas sobre dónde pueden aparecer los elementos. Cuando encuentra un <div> en una ubicación inesperada, lo reporta como una etiqueta de inicio “perdida”. El analizador puede intentar una recuperación de errores — a menudo ignorando la etiqueta o moviéndola — pero el árbol DOM resultante puede no coincidir con tus intenciones, llevando a diseños rotos o contenido faltante.

Hay varias causas comunes de este error:

Ubicación después de </body> o </html>: Todo el contenido visible debe vivir dentro del elemento <body>. Cualquier <div> que aparezca después de </body> o </html> está perdido porque la estructura del documento ya ha sido cerrada.

Dentro de elementos con modelos de contenido restringidos: Elementos como <table>, <ul>, <ol>, y <select> solo permiten elementos hijos específicos. Un <div> colocado directamente dentro de un <table> (fuera de <thead>, <tbody>, <tfoot>, <tr>, <td>, o <th>) o directamente dentro de un <ul> (que solo permite hijos <li>) activará este error.

Etiquetas de cierre faltantes: Si olvidas cerrar un elemento como </td>, </li>, o </p>, el analizador puede cerrarlo implícitamente en un punto que deja tu <div> huérfano en un contexto inválido. Esta es una de las causas más complicadas porque el <div> en sí se ve bien — el problema real está en otra parte.

Por qué esto importa: Más allá del cumplimiento de estándares, un elemento perdido puede causar que los navegadores construyan un DOM inesperado. Esto puede romper diseños CSS, causar que los selectores JavaScript fallen, y crear problemas de accesibilidad donde las tecnologías asistivas malinterpretan la estructura de la página.

Ejemplos

`<div>` perdido después de la etiqueta de cierre `</html>`

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

El <div> aparece después de que el documento haya sido completamente cerrado. Muévelo 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 un `<table>`

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

Un <table> no permite <div> como hijo directo. Elimina el <div> o reestructura:

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

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

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

Un <ul> solo acepta elementos <li> como hijos directos. Coloca el <div> dentro de cada <li>, o envuelve toda la lista:

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

`<div>` perdido causado por una etiqueta de cierre faltante

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

El </td> faltante puede causar confusión en el analizador que hace que el <div> aparezca perdido en algunos contextos. Siempre cierra tus etiquetas explícitamente:

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

Cómo depurar

Si la ubicación del error no es obvia, sigue estos pasos:

Verifica el número de línea reportado por el validador y mira qué elemento contiene al <div> anidado.
Busca etiquetas de cierre faltantes arriba de la línea señalada — un </td>, </li>, </div>, o </p> faltante es a menudo el verdadero culpable.
Verifica el modelo de contenido del elemento padre — verifica si ese padre tiene permitido contener un <div> consultando la referencia de elementos de MDN.
Usa las DevTools de tu navegador para inspeccionar el DOM real. Si el navegador movió o eliminó tu <div>, el árbol DOM diferirá de tu HTML fuente, ayudándote a identificar dónde el analizador perdió la sincronización.