Validación HTML: Etiqueta de inicio "section" extraviada.

Acerca de este problema HTML

La palabra “extraviada” en este mensaje de error significa que el validador encontró una etiqueta de inicio en un lugar donde no se permite ningún elemento de ese tipo según la especificación HTML. El elemento <section> es contenido de flujo, por lo que debe aparecer dentro del elemento <body> (o dentro de otro elemento que acepte contenido de flujo, como <main>, <article>, <div>, etc.). Cuando el validador ve <section> en algún lugar donde no puede existir legalmente, lo marca como “extraviado”.

Hay varias causas comunes para este error:

Contenido colocado después de </body> o </html>: La causa más frecuente. Existe marcado adicional más allá de las etiquetas de cierre del cuerpo del documento.
Cierre prematuro del <body>: Una etiqueta </body> adicional o mal colocada antes en el documento hace que el navegador considere el body cerrado, convirtiendo cualquier <section> subsecuente en extraviado.
Anidamiento dentro de elementos que no aceptan contenido de flujo: Colocar <section> directamente dentro de un <p>, <span>, <a>, u otro elemento que solo acepta contenido de fraseo. Dado que estos elementos no pueden contener contenido de flujo de nivel de bloque, el navegador cierra implícitamente el padre, dejando <section> en una posición inválida.
Etiquetas malformadas o sin cerrar: Errores de sintaxis anteriores — como un > de cierre faltante en una etiqueta — pueden cambiar la comprensión del parser del árbol del documento, causando que elementos posteriores aparezcan extraviados.

Esto importa porque los navegadores usan recuperación de errores cuando encuentran elementos extraviados, y diferentes navegadores pueden manejar la recuperación de manera diferente. Tu contenido podría terminar fuera del documento visible, renderizarse de manera inconsistente, o causar que las herramientas de accesibilidad malinterpreten la estructura de la página. Corregir este error asegura un renderizado predecible y un documento bien formado.

Ejemplos

`<section>` extraviado después de la etiqueta de cierre `</body>`

Este es el escenario más común. El contenido colocado después de </body> no tiene ningún lugar válido donde ir:

<!-- ❌ Incorrecto: section aparece después de </body> -->

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Example</title>
</head>
<body>
  <h1>Welcome</h1>
  <p>Some content.</p>
</body>
<section>
  <h2>About</h2>
  <p>This section is stray.</p>
</section>
</html>

Mueve el <section> dentro del <body>:

<!-- ✅ Correcto: section está dentro de <body> -->

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Example</title>
</head>
<body>
  <h1>Welcome</h1>
  <p>Some content.</p>
  <section>
    <h2>About</h2>
    <p>This section is properly placed.</p>
  </section>
</body>
</html>

Etiqueta `</body>` adicional causando un cierre prematuro

Una etiqueta de cierre duplicada puede engañar al parser para que termine el body temprano:

<!-- ❌ Incorrecto: </body> adicional causa que section se vuelva extraviado -->

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Example</title>
</head>
<body>
  <div>
    <p>Main content.</p>
<!-- etiqueta de cierre adicional accidental -->

  </div>
  <section>
    <h2>Updates</h2>
    <p>This is now stray.</p>
  </section>
</body>
</html>

Elimina la etiqueta </body> adicional:

<!-- ✅ Correcto: un solo </body> al final -->

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Example</title>
</head>
<body>
  <div>
    <p>Main content.</p>
  </div>
  <section>
    <h2>Updates</h2>
    <p>This is correctly placed now.</p>
  </section>
</body>
</html>

Anidando `<section>` dentro de un elemento `<p>`

El elemento <p> solo acepta contenido de fraseo. Cuando el parser encuentra un <section> dentro de un <p>, cierra implícitamente el <p> primero, lo cual puede dejar al <section> en una posición inesperada:

<!-- ❌ Incorrecto: section anidado dentro de un párrafo -->

<p>
  Introduction text.
  <section>
    <h2>Details</h2>
    <p>More info here.</p>
  </section>
</p>

Separa el párrafo y la sección en hermanos:

<!-- ✅ Correcto: section es un hermano, no un hijo de <p> -->

<p>Introduction text.</p>
<section>
  <h2>Details</h2>
  <p>More info here.</p>
</section>

Etiqueta sin cerrar causando errores posteriores

Un corchete angular de cierre faltante en un elemento anterior puede corromper la vista del parser de todo el árbol del documento:

<!-- ❌ Incorrecto: falta > en el </div causa problemas de parseo -->

<body>
  <div>
    <p>Content here.</p>
  </div
  <section>
    <h2>Topics</h2>
    <p>This may be flagged as stray.</p>
  </section>
</body>

Corrige la etiqueta malformada:

<!-- ✅ Correcto: </div> correctamente cerrado -->

<body>
  <div>
    <p>Content here.</p>
  </div>
  <section>
    <h2>Topics</h2>
    <p>No longer stray.</p>
  </section>
</body>

Cómo depurar este problema

Verifica el número de línea reportado por el validador y mira lo que viene antes de la etiqueta <section> — el problema usualmente está arriba de ella, no en el <section> mismo.
Busca etiquetas de cierre adicionales como </body>, </html>, o </div> que puedan cerrar prematuramente un contenedor.
Verifica los elementos padre — asegúrate de que <section> no esté anidado dentro de <p>, <span>, <a>, <button>, u otros elementos que solo aceptan contenido de fraseo.
Usa indentación apropiada para hacer la jerarquía del documento visualmente clara. Las etiquetas mal colocadas son mucho más fáciles de detectar en código bien formateado.
Revalida después de cada corrección, ya que corregir un error de etiqueta extraviada a menudo resuelve múltiples advertencias relacionadas.