Validación HTML: Elemento "meta" entre "head" y "body".

Acerca de este problema HTML

Según la especificación HTML, los elementos <meta> son contenido de metadatos y deben aparecer dentro del elemento <head>. Cuando una etiqueta <meta> aparece entre </head> y <body>, los navegadores tienen que corregir el error ignorando el elemento o reubicándolo silenciosamente en el head. Esto puede llevar a un comportamiento impredecible — por ejemplo, una etiqueta <meta charset="utf-8"> en la posición incorrecta podría no procesarse a tiempo, causando problemas de codificación de caracteres. De manera similar, un <meta name="viewport"> mal ubicado podría fallar al aplicarse en algunos navegadores, rompiendo tu diseño responsivo.

Hay varias causas comunes para este error:

Una etiqueta <meta> colocada accidentalmente después de </head> — tal vez añadida de forma apresurada o por un error de copiar y pegar.
Una sección <head> duplicada — si aparece un segundo bloque <head> en el documento, el navegador cierra el primero implícitamente, dejando elementos <meta> huérfanos en el limbo.
Un elemento sin cerrar dentro de <head> — una etiqueta como un <link> o <script> sin cerrar puede confundir al analizador, causando que cierre </head> implícitamente antes de lo esperado, lo que empuja las etiquetas <meta> subsecuentes fuera del head.
Inyección de plantilla o CMS — los sistemas de gestión de contenido o motores de plantillas a veces inyectan etiquetas <meta> en posiciones incorrectas del documento.

Para solucionar el problema, inspecciona tu código fuente HTML y asegúrate de que cada elemento <meta> esté dentro de una sola sección <head> correctamente estructurada. También verifica que ningún elemento dentro de <head> esté sin cerrar o mal formado, ya que esto puede hacer que el analizador termine la sección head prematuramente.

Ejemplos

Incorrecto — `<meta>` entre `</head>` y `<body>`

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My Page</title>
    <meta charset="utf-8">
  </head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <body>
    <p>Hello, world!</p>
  </body>
</html>

La etiqueta <meta name="viewport"> está fuera de <head>, desencadenando el error de validación.

Incorrecto — secciones `<head>` duplicadas

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My Page</title>
    <meta charset="utf-8">
  </head>
  <head>
    <meta name="description" content="A sample page">
  </head>
  <body>
    <p>Hello, world!</p>
  </body>
</html>

El segundo bloque <head> es inválido. El navegador lo ignora, dejando el elemento <meta name="description"> varado entre </head> y <body>.

Incorrecto — elemento sin cerrar fuerza el cierre temprano del head

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My Page</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <div>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <p>Hello, world!</p>
  </body>
</html>

El <div> no es válido dentro de <head>, por lo que el analizador cierra implícitamente la sección head cuando lo encuentra. La etiqueta <meta> subsecuente termina fuera de <head>.

Correcto — todos los elementos `<meta>` dentro de `<head>`

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="A sample page">
    <title>My Page</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <p>Hello, world!</p>
  </body>
</html>

Todos los elementos <meta> están correctamente contenidos dentro de una sola sección <head>. Ten en cuenta que <meta charset="utf-8"> debería idealmente ser el primer elemento en <head> para que el navegador conozca la codificación antes de procesar cualquier otro contenido.