<link>: O Elemento LINK
Última atualização: 2026-10-13
<link>O Elemento LINK
Define uma relação entre o documento atual e um recurso externo, mais frequentemente uma folha de estilos CSS, mas também ícones ou preloads.
| Categoria | Metadados |
|---|---|
| Modelo de Conteúdo | Conteúdo de fluxo |
| Pais Permitidos | Qualquer elemento que aceite conteúdo de fluxo |
| Tag de Fechamento | Auto-fechante — nenhuma tag de fechamento necessária |
| Status | Padrão |
📝 Sintaxe
<link rel="stylesheet" href="style.css">⚙️ Atributos
Este elemento suporta os atributos globais mais os seguintes:
| Atributo | Valor | Descrição |
|---|---|---|
rel | Relationship: stylesheet, icon, preload, alternate, etc. | |
href | URL of the external resource. | |
type | MIME type of the resource (e.g. text/css). | |
media | Media/device condition the resource applies to. | |
sizes | Icon sizes for rel=icon (e.g. 32x32). |
▶ Exemplo
Edite o código abaixo e veja o resultado em tempo real no playground:
🌐 Suporte de Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| <link> | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Suportado em todos os navegadores principais | |||||
Dica： link é um elemento vazio; rel="stylesheet" é o uso mais comum.
❓ Perguntas Frequentes
QQuais são os valores mais comuns do rel de link?
AFolha de estilo
stylesheet, favicon icon, pré-carregamento preload/prefetch/preconnect, link canônico canonical, anotação multilíngue alternate, RSS alternate type='application/rss+xml'. O rel define para que serve o link — é o seu atributo alma.QQual é a diferença entre preload e prefetch?
A
preload: recursos críticos «que a página atual vai usar já» (fonte da primeira dobra, CSS crítico), carregados com prioridade alta; prefetch: recursos «que a próxima página talvez use», carregados com prioridade baixa quando ocioso. Usar o errado desperdiça banda — recursos da página atual em preload, entre páginas em prefetch.QComo configurar o favicon com link?
AEscrita moderna:
<link rel='icon' href='/favicon.ico' sizes='any'> mais <link rel='icon' type='image/svg+xml' href='/icon.svg'>; ícone de tela de toque da Apple usa rel='apple-touch-icon'. Sem nenhum link, o navegador pede /favicon.ico por padrão.🏷️ Tags Relacionadas
💡 Casos Relacionados
Mais estudos de caso em breve — volte mais tarde.
📚 Tutoriais Relacionados
