Tag HTML <link>
A tag HTML <link> conecta um documento a recursos externos como CSS, favicons e arquivos pré-carregados. Atributos, valores de rel e exemplos.
A tag <link> define a relação entre o documento atual e um recurso externo. Sua função mais comum é vincular uma folha de estilos CSS externa, mas também é usada para anexar um favicon, declarar versões traduzidas de uma página e indicar ao navegador quais recursos buscar antecipadamente para melhor desempenho.
Esta página abrange a sintaxe de <link>, todos os atributos que ela aceita e exemplos práticos para os valores de rel mais utilizados: stylesheet, icon, preload e alternate. Também explica a família de dicas de recursos (preload, prefetch, preconnect, dns-prefetch) e os atributos de segurança crossorigin / integrity.
Note que <link> não carrega scripts — essa é a função da tag <script>. A única exceção é rel="modulepreload", que apenas pré-busca um módulo JavaScript para que esteja pronto quando um <script> o solicitar.
Um documento HTML pode conter vários elementos <link> para diferentes tipos de recursos, como folhas de estilos, ícones e conteúdo pré-carregado. Todos eles pertencem à seção <head> do documento, normalmente antes da tag de fechamento </head>.
Sintaxe
A tag <link> é vazia, o que significa que a tag de fechamento não é necessária. Ela contém apenas atributos. Porém, em XHTML, a tag <link> deve ser fechada (<link/>).
Exemplo da tag HTML <link>:
Tag HTML <link>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>The appearance of the header is determined by the CSS styles specified in the external file.</h1>
<p>The appearance of the paragraph is determined by the CSS styles specified in the external file.</p>
</body>
</html>Neste exemplo, a página não possui estilos próprios. Toda regra que controla a aparência do cabeçalho e do parágrafo está no arquivo externo style.css, que o elemento <link> importa. Abra o editor ao vivo acima e edite o style.css para ver as alterações aplicadas à marcação.
Vinculando um favicon
Um favicon é o pequeno ícone exibido na aba do navegador e nos favoritos. Você o declara com rel="icon". O atributo type informa ao navegador o formato da imagem, e sizes permite oferecer várias resoluções para que o navegador escolha a mais adequada.
<head>
<!-- A standard favicon -->
<link rel="icon" href="/favicon.ico" sizes="any" />
<!-- A modern SVG icon (scales to any resolution) -->
<link rel="icon" type="image/svg+xml" href="/icon.svg" />
<!-- A PNG at a specific size -->
<link rel="icon" type="image/png" sizes="32x32" href="/icon-32.png" />
<!-- Icon used when the page is added to an iOS home screen -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
</head>sizes="any" marca um ícone escalável (como .ico ou .svg); caso contrário, use LARGURAxALTURA (por exemplo 32x32) por arquivo.
Pré-carregando recursos com rel="preload"
rel="preload" instrui o navegador a buscar um recurso antecipadamente, com alta prioridade, antes que o analisador normalmente o descobrisse. Ele não aplica o recurso — apenas o baixa para que o arquivo já esteja em cache quando for necessário.
Ao usar preload, o atributo as é obrigatório. Ele informa ao navegador o tipo de recurso para que possa definir a prioridade correta, aplicar o cabeçalho Accept adequado e acionar as verificações corretas de CORS e Content-Security-Policy.
<head>
<!-- Preload a stylesheet -->
<link rel="preload" href="/main.css" as="style" />
<!-- Preload a font (fonts are always fetched with CORS, so crossorigin is required) -->
<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin />
<!-- Preload an image that is the page's largest element -->
<link rel="preload" href="/hero.jpg" as="image" />
</head>Uma folha de estilos pré-carregada ainda precisa de um link normal rel="stylesheet" (ou de um <style>/@import) para ser efetivamente aplicada à página — preload sozinho apenas a baixa.
Dicas de recursos: preload vs prefetch vs preconnect vs dns-prefetch
Esses quatro valores de rel ajudam no desempenho, mas resolvem problemas diferentes e não são intercambiáveis:
Valor de rel | O que faz | Use para |
|---|---|---|
preload | Baixa um recurso que a página atual precisará em breve, com alta prioridade. | CSS crítico, fontes, a imagem LCP — arquivos que seriam descobertos tarde. |
prefetch | Baixa um recurso que uma futura navegação provavelmente precisará, com baixa prioridade. | Assets para a próxima página que o usuário provavelmente visitará. |
preconnect | Abre a conexão (DNS + TCP + handshake TLS) com uma origem diferente com antecedência. | Origens das quais você definitivamente fará requisições em breve, como um host de fontes ou de API. |
dns-prefetch | Resolve apenas o DNS de uma origem. Mais leve que preconnect e um bom fallback. | Origens que você pode usar, ou como complemento ao preconnect para navegadores mais antigos. |
<head>
<!-- Open the connection to the font host as early as possible -->
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<!-- Fallback DNS lookup for browsers that ignore preconnect -->
<link rel="dns-prefetch" href="https://fonts.gstatic.com" />
<!-- Warm up an asset the next page will need -->
<link rel="prefetch" href="/next-page.js" as="script" />
</head>Regra geral: preload para esta página, prefetch para a próxima página, e preconnect / dns-prefetch para aquecer conexões com outras origens.
Versões alternativas com rel="alternate"
rel="alternate" aponta para uma representação alternativa do documento atual. Combinado com hreflang, informa aos mecanismos de busca qual URL atende a qual idioma ou região — essencial para sites multilíngues.
<head>
<link rel="alternate" hreflang="en" href="https://example.com/en/" />
<link rel="alternate" hreflang="de" href="https://example.com/de/" />
<link rel="alternate" hreflang="fr" href="https://example.com/fr/" />
<!-- Default fallback when no language matches -->
<link rel="alternate" hreflang="x-default" href="https://example.com/" />
</head>O mesmo valor de rel também declara alternativas não HTML, como um feed RSS:
<link rel="alternate" type="application/rss+xml" title="RSS Feed" href="/feed.xml" />crossorigin e integrity
O atributo crossorigin controla se a requisição de origem cruzada é feita com CORS e se credenciais (cookies) são enviadas:
crossorigin="anonymous"(ou simplesmentecrossorigin) — faz uma requisição CORS sem credenciais.crossorigin="use-credentials"— faz uma requisição CORS que inclui credenciais.
Você precisa de crossorigin sempre que o navegador precisar ler a resposta entre origens, mais comumente para fontes (que são sempre buscadas no modo CORS) e para qualquer recurso protegido com integrity.
O atributo integrity habilita a Integridade de Subrecurso (SRI). Você fornece um hash criptográfico do arquivo; o navegador busca o recurso, calcula o hash e se recusa a aplicá-lo se os hashes não coincidirem. Isso protege você caso uma CDN seja comprometida ou um arquivo seja adulterado.
<link
rel="stylesheet"
href="https://cdn.example.com/bootstrap.min.css"
integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM"
crossorigin="anonymous"
/>O formato do hash é <algoritmo>-<hash-base64> (algoritmos permitidos: sha256, sha384, sha512). Como a verificação de integridade precisa ler a resposta, um link integrity para outra origem também deve definir crossorigin.
Atributos
| Atributo | Valor | Descrição |
|---|---|---|
| as | content_type | Especifica o tipo de conteúdo sendo carregado. Obrigatório quando rel="preload". |
| charset | char_encoding | Define a codificação do documento vinculado. Obsoleto em HTML5. |
| crossorigin | anonymous use-credentials | Configura as definições de CORS para o recurso vinculado. |
| href | URL | Define a URL do arquivo externo. |
| hreflang | language_code | Define o idioma do texto do documento vinculado. |
| integrity | hash_value | Habilita a integridade de subrecurso para verificar os recursos buscados. |
| media | media_query | Define o dispositivo para o qual os estilos serão aplicados. |
| rel | alternate author bookmark dns-prefetch first help icon last license next nofollow noreferrer pingback preload prefetch prev search stylesheet tag preconnect manifest modulepreload | Define a relação entre o documento atual e o arquivo vinculado. Valores comuns: stylesheet (vincula um arquivo CSS), icon (vincula um favicon), preload (pré-carrega um recurso), alternate (vincula a uma versão alternativa do documento). |
| rev | reversed relationship | Define a relação entre o documento atual e o vinculado. Obsoleto em HTML5. |
| sizes | Width x Height | Define o tamanho dos ícones associados. Usado apenas com rel="icon". |
| type | media_type | Define o tipo MIME (especificação para transferência em rede de vários tipos de arquivos) do documento vinculado. Nota: ao vincular uma folha de estilos, type="text/css" é opcional e assume CSS por padrão. |
A tag <link> também suporta Atributos Globais e os Atributos de Evento.
Recursos relacionados
- Tag HTML
<head>— onde cada elemento<link>pertence. - Tag HTML
<script>— a forma correta de carregar JavaScript. - Tag HTML
<style>— incorporar CSS diretamente em vez de vincular um arquivo. - Introdução ao CSS — como as folhas de estilos que você vincula realmente funcionam.