Validación HTML: Etiqueta de apertura `link` fuera de lugar.

Acerca de este problema HTML

El elemento <link> se usa para definir relaciones entre el documento actual y recursos externos — más comúnmente hojas de estilo, favicons y recursos precargados. Según la especificación HTML, los elementos <link> pertenecen a la sección <head> de un documento (con una excepción específica para tipos de enlace body-ok como ciertos usos de rel="stylesheet", aunque los validadores aún esperan que estén en el <head> por claridad y corrección).

Este error ocurre típicamente en algunos escenarios comunes:

Una etiqueta <link> se coloca accidentalmente dentro del elemento <body>.
Una etiqueta <link> aparece después de la etiqueta de cierre </head> pero antes de la etiqueta <body>.
Una etiqueta <link> se coloca después de la etiqueta de cierre </html>, a menudo por un CMS, motor de plantillas o plugin que inyecta código al final del documento.
La etiqueta </head> falta o está mal colocada, causando que el navegador cierre implícitamente el <head> antes de llegar al <link>.

Cuando el validador encuentra un elemento <link> fuera de su contexto esperado, lo reporta como una etiqueta de apertura “fuera de lugar” — significando que el elemento se ha encontrado en algún lugar donde no pertenece.

Por qué es importante

Cumplimiento de estándares: La especificación HTML define <link> como contenido de metadatos que pertenece al <head>. Colocarlo en otra parte produce HTML no válido.

Comportamiento impredecible: Los navegadores intentarán manejar elementos <link> mal colocados, pero el comportamiento puede ser inconsistente. Un <link> de hoja de estilo encontrado en el <body> puede provocar un destello de contenido sin estilos (FOUC) cuando el navegador vuelve a renderizar la página después de descubrir la nueva hoja de estilo.

Rendimiento: Las hojas de estilo enlazadas desde el <head> se descubren temprano durante el análisis, permitiendo al navegador obtenerlas y aplicarlas antes de que comience el renderizado. Los elementos <link> mal colocados pueden retrasar la carga de recursos y degradar la experiencia del usuario.

Mantenibilidad: Mantener todos los elementos <link> en el <head> hace que la estructura del documento sea predecible y más fácil de mantener para otros desarrolladores.

Cómo solucionarlo

Localiza el elemento <link> fuera de lugar — el validador indicará el número de línea donde ocurre el problema.
Muévelo a la sección <head> — colócalo después de la etiqueta de apertura <head> y antes de la etiqueta de cierre </head>.
Verifica que tu etiqueta </head> existe y está en el lugar correcto — un </head> faltante o mal colocado puede causar que elementos que pensabas estaban en el head terminen en el body.
Revisa la salida de plantillas o CMS — si usas un generador de sitios estáticos, CMS o framework, verifica que plugins o includes no estén inyectando etiquetas <link> fuera del <head>.

Ejemplos

❌ `<link>` colocado dentro del `<body>`

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

❌ `<link>` colocado después de la etiqueta de cierre `</html>`

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

❌ `</head>` faltante causa que `<link>` quede fuera de lugar

En este ejemplo, la etiqueta </head> falta. El navegador encuentra la etiqueta <body> y cierra implícitamente el <head>, pero el <link> después de él se convierte en contenido fuera de lugar entre el cierre implícito del head y el body.

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

✅ Correcto: todos los elementos `<link>` dentro del `<head>`

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My Page</title>
    <link rel="stylesheet" href="css/app.css">
    <link rel="icon" href="favicon.ico">
  </head>
  <body>
    <h1>Hello</h1>
  </body>
</html>

Todos los elementos <link> están colocados dentro de la sección <head>, la etiqueta de cierre </head> está presente, y la estructura del documento es limpia y válida.