Verificação HTML: Um elemento "link" deve ter um atributo "href" ou "imagesrcset", ou ambos.

Sobre este problema HTML

O elemento <link> define uma relação entre o documento atual e um recurso externo — mais comummente folhas de estilo, ícones, recursos pré-carregados ou URLs canónicos. De acordo com a especificação HTML, o elemento deve incluir pelo menos um dos atributos href ou imagesrcset para que o navegador saiba que recurso está a ser ligado. Um elemento <link> sem nenhum dos atributos é essencialmente uma declaração vazia: diz ao navegador sobre um tipo de relação (via rel) mas não fornece nenhum recurso real para buscar ou referenciar.

Este erro de validação ocorre comummente em alguns cenários:

Problemas de templating ou CMS: Um template dinâmico gera uma tag <link> mas a variável URL está vazia ou indefinida, resultando num elemento vazio sem href.
Código incompleto: Um programador adiciona um <link> com um atributo rel pretendendo preencher o href mais tarde mas esquece-se de o fazer.
Erros de copiar-colar: Os atributos são acidentalmente removidos durante a edição ou refatorização.

Corrigir isto é importante por várias razões. Os navegadores podem ignorar completamente o elemento ou comportar-se de forma imprevisível quando encontram um <link> sem URL de recurso. Elementos desnecessários sem propósito adicionam peso desnecessário ao documento e podem confundir outros programadores que leiam o código. Além disso, ferramentas que analisam HTML — como crawlers de motores de busca e tecnologias assistivas — dependem de marcação bem-formada para compreender corretamente as relações do documento.

Para resolver o problema, adicione um atributo href que aponte para o recurso de destino, use um atributo imagesrcset quando fornecer fontes de imagem responsivas, ou inclua ambos quando apropriado.

Exemplos

Inválido: faltam `href` e `imagesrcset`

Este <link> declara uma relação de folha de estilo mas não especifica onde a folha de estilo está localizada:

<link rel="stylesheet">

Este link de preload tem um atributo as mas nenhum recurso para buscar:

<link rel="preload" as="image" type="image/png">

Corrigido: usando `href`

A correção mais comum é adicionar um atributo href com uma URL válida:

<link rel="stylesheet" href="styles.css">

<link rel="icon" href="favicon.ico">

<link rel="canonical" href="https://example.com/page">

Corrigido: usando `imagesrcset`

Para pré-carregamento de imagem responsiva, o atributo imagesrcset especifica múltiplas fontes de imagem em diferentes resoluções. Isto é válido sem href:

<link rel="preload" as="image" type="image/png" imagesrcset="icon-1x.png 1x, icon-2x.png 2x">

Corrigido: usando `href` e `imagesrcset`

Pode combinar ambos os atributos. O href serve como recurso de fallback enquanto imagesrcset fornece alternativas responsivas:

<link rel="preload" as="image" href="icon-1x.png" imagesrcset="icon-1x.png 1x, icon-2x.png 2x">

Lidar com templates dinâmicos

Se os seus elementos <link> forem gerados dinamicamente, certifique-se de que o elemento só é renderizado quando uma URL válida está disponível. Por exemplo, num template, envolva a saída numa verificação condicional em vez de produzir um <link> vazio:

<!-- Mau: produz um link mesmo quando a URL está vazia -->

<link rel="stylesheet" href="">

<!-- Bom: inclui apenas o elemento quando há uma URL real -->

<link rel="stylesheet" href="styles.css">

Note que href="" resolve para a URL da página atual e é tecnicamente sintaxe válida (não irá desencadear este erro específico), mas quase certamente não é o que você pretende. Certifique-se sempre de que o valor href aponta para o recurso correto.