Verificação HTML: Elemento inicial isolado "link".

Sobre este problema HTML

O elemento <link> é usado para definir relações entre o documento atual e recursos externos — mais comummente folhas de estilo, favicons e recursos pré-carregados. De acordo com a especificação HTML, os elementos <link> pertencem à secção <head> de um documento (com uma exceção restrita para tipos de link body-ok como certos usos de rel="stylesheet", embora os validadores ainda os esperem no <head> para clareza e correção).

Este erro tipicamente acontece em alguns cenários comuns:

Uma etiqueta <link> é colocada acidentalmente dentro do elemento <body>.
Uma etiqueta <link> aparece após a etiqueta de fecho </head> mas antes da etiqueta <body>.
Uma etiqueta <link> é colocada após a etiqueta de fecho </html>, frequentemente por um CMS, motor de templates ou plugin que injeta código no final do documento.
A etiqueta </head> está em falta ou mal colocada, causando o fecho implícito do <head> pelo navegador antes de chegar ao <link>.

Quando o validador encontra um elemento <link> fora do seu contexto esperado, reporta-o como uma etiqueta inicial “isolada” — significando que o elemento foi encontrado algures onde não pertence.

Porque isto é importante

Conformidade com normas: A especificação HTML define <link> como conteúdo de metadata que pertence ao <head>. Colocá-lo noutro lugar produz HTML inválido.

Comportamento imprevisível: Os navegadores tentarão lidar com elementos <link> mal colocados, mas o comportamento pode ser inconsistente. Um <link> de folha de estilo encontrado no <body> pode despoletar um flash de conteúdo sem estilo (FOUC) à medida que o navegador re-renderiza a página após descobrir a nova folha de estilo.

Performance: Folhas de estilo ligadas a partir do <head> são descobertas cedo durante a análise, permitindo ao navegador buscá-las e aplicá-las antes do início da renderização. Elementos <link> mal colocados podem atrasar o carregamento de recursos e degradar a experiência do utilizador.

Manutenibilidade: Manter todos os elementos <link> no <head> torna a estrutura do documento previsível e mais fácil de manter para outros programadores.

Como resolver

Localizar o elemento <link> isolado — o validador indicará o número da linha onde o problema ocorre.
Movê-lo para a secção <head> — coloque-o após a etiqueta de abertura <head> e antes da etiqueta de fecho </head>.
Verificar que a sua etiqueta </head> existe e está no lugar certo — um </head> em falta ou mal colocado pode fazer com que elementos que você pensava estarem na head acabem realmente no body.
Rever a saída de templates ou CMS — se você usar um gerador de site estático, CMS ou framework, verifique que plugins ou includes não estão a injetar etiquetas <link> fora do <head>.

Exemplos

❌ `<link>` colocado dentro do `<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 após a etiqueta de fecho `</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>` em falta faz com que `<link>` se torne isolado

Neste exemplo, a etiqueta </head> está em falta. O navegador encontra a etiqueta <body> e fecha implicitamente o <head>, mas o <link> após ele torna-se conteúdo isolado entre o fecho implícito da head e o body.

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

✅ Correto: todos os elementos `<link>` dentro do `<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 os elementos <link> são colocados dentro da secção <head>, a etiqueta de fecho </head> está presente, e a estrutura do documento está limpa e válida.