<link>
Définit la relation entre le document courant et une ressource externe : feuille de style, favicon, preconnect, préchargement.
Description
L’élément <link> lie le document HTML à une ressource externe. Son usage principal est l’import de feuilles de style CSS. Il sert également à déclarer le favicon, précharger des ressources critiques, signaler des variantes du document (RSS, traductions), et configurer des optimisations de connexion (preconnect, dns-prefetch).
Syntaxe
<link rel="stylesheet" href="styles.css">Exemples
Feuilles de style et favicon :
<head>
<link rel="stylesheet" href="/css/app.css">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
</head>Optimisations de performance :
<!-- Préconnexion aux serveurs tiers -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="dns-prefetch" href="https://cdn.example.com">
<!-- Préchargement de ressources critiques -->
<link rel="preload" href="/fonts/mapolice.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/images/hero.jpg" as="image" fetchpriority="high">Flux RSS et sitemap :
<link rel="alternate" type="application/rss+xml" title="Flux RSS" href="/feed.xml">
<link rel="sitemap" type="application/xml" href="/sitemap.xml">Attributs spécifiques
| Attribut | Type | Description |
|---|---|---|
rel | string | Relation entre le document et la ressource. Valeurs courantes : stylesheet, icon, preconnect, preload, dns-prefetch, alternate, canonical, manifest. |
href | URL | URL de la ressource liée. |
type | MIME | Type MIME de la ressource. |
media | string | Media query CSS conditionnant le chargement de la ressource. |
as | string | Type de ressource pour rel="preload" : font, image, script, style, fetch, document… |
crossorigin | enum | anonymous ou use-credentials pour les ressources CORS. Requis pour preload de polices. |
integrity | string | Hash SRI (Subresource Integrity) pour vérifier l’intégrité de la ressource. |
fetchpriority | enum | Priorité de chargement : high, low, auto. |
sizes | string | Tailles pour rel="icon" (ex. 16x16, any). |
Notes
rel="canonical" : indique l’URL canonique d’une page pour éviter le contenu dupliqué aux yeux des moteurs de recherche.
rel="preload" + as obligatoire : sans as, le navigateur ne sait pas comment prioriser la ressource et peut l’ignorer.
Support navigateurs
Chrome1+ · Firefox1+ · Safari≤4+ · Edge12+