Validación HTML: Etiqueta de apertura `head` perdida.

Acerca de este problema HTML

El elemento <head> es el contenedor para metadatos del documento — cosas como el <title>, etiquetas <meta>, elementos <link>, y referencias <script>. Según la especificación HTML, el <head> debe ser el primer elemento hijo de <html> y debe aparecer exactamente una vez. Cuando el analizador del navegador encuentra una segunda etiqueta <head>, o una etiqueta <head> después de que el <body> ya se haya abierto, la trata como una etiqueta de apertura “perdida” porque viola la estructura esperada del documento.

Este problema surge comúnmente en varias situaciones:

Secciones <head> duplicadas — a menudo causadas por errores de copiar y pegar, inclusiones de plantillas, o renderizado del lado del servidor que inyecta un segundo bloque <head>.
<head> colocado dentro del <body> — esto puede suceder al reestructurar una página o cuando un componente o plantilla parcial incluye incorrectamente su propio <head>.
Etiquetas de cierre faltantes o mal colocadas — si olvidas cerrar el <head> con </head> o accidentalmente cierras <html> antes de tiempo, las etiquetas subsecuentes pueden terminar en posiciones inesperadas.

Esto es importante porque los navegadores manejan las etiquetas <head> perdidas de manera inconsistente. La mayoría de los navegadores modernos ignorarán silenciosamente un segundo <head> e intentarán procesar sus hijos como si fueran parte del <body>, lo que significa que tus metadatos (como declaraciones <meta> charset, hojas de estilo, o scripts) pueden no ser reconocidos adecuadamente. Esto puede llevar a estilos rotos, problemas de codificación, metadatos SEO faltantes, y comportamiento impredecible entre diferentes navegadores.

Ejemplos

Secciones `<head>` duplicadas

Un error común es tener dos bloques <head> en el mismo documento:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My Page</title>
  </head>
  <head>
    <meta name="description" content="My description">
  </head>
  <body>
    <p>Hello world</p>
  </body>
</html>

El segundo <head> desencadena el error de etiqueta de apertura perdida. Fusiona todo en un solo <head>:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My Page</title>
    <meta name="description" content="My description">
  </head>
  <body>
    <p>Hello world</p>
  </body>
</html>

`<head>` colocado dentro del `<body>`

Esto sucede a menudo cuando una plantilla parcial o componente incluye su propio <head>:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My Page</title>
  </head>
  <body>
    <head>
      <link rel="stylesheet" href="extra.css">
    </head>
    <p>Hello world</p>
  </body>
</html>

Mueve los metadatos a la sección <head> existente:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My Page</title>
    <link rel="stylesheet" href="extra.css">
  </head>
  <body>
    <p>Hello world</p>
  </body>
</html>

`<head>` apareciendo después del `<body>`

A veces un <head> termina después de la etiqueta de cierre </body>, particularmente en páginas ensambladas dinámicamente:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My Page</title>
  </head>
  <body>
    <p>Hello world</p>
  </body>
  <head>
    <meta charset="utf-8">
  </head>
</html>

Nuevamente, la solución es consolidar todo en el único <head> colocado correctamente:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>My Page</title>
  </head>
  <body>
    <p>Hello world</p>
  </body>
</html>

Consejo para sistemas basados en plantillas

Si usas un motor de plantillas, generador de sitios estáticos, o CMS, verifica que solo tu diseño base defina el elemento <head>. Las plantillas parciales y componentes deberían inyectar contenido dentro del <head> existente usando el mecanismo de bloques o slots del sistema de plantillas, en lugar de envolver sus metadatos en una nueva etiqueta <head>. Busca en la salida HTML final renderizada todas las ocurrencias de <head para verificar que solo hay una.