La balise HTML <link>
La balise HTML <link> relie un document à des ressources externes comme CSS, les favicons et les fichiers préchargés. Attributs, valeurs rel et exemples.
La balise <link> définit la relation entre le document courant et une ressource externe. Son rôle le plus courant est de lier une feuille de style CSS externe, mais c'est aussi ainsi que l'on attache un favicon, que l'on déclare des versions traduites d'une page, et que l'on indique au navigateur quelles ressources récupérer à l'avance pour de meilleures performances.
Cette page couvre la syntaxe de <link>, tous les attributs qu'elle accepte, ainsi que des exemples concrets pour les valeurs de rel les plus courantes : stylesheet, icon, preload et alternate. Elle explique également la famille des indices de ressources (preload, prefetch, preconnect, dns-prefetch) et les attributs de sécurité crossorigin / integrity.
Notez que <link> ne charge pas les scripts — c'est le rôle de la balise <script>. La seule exception est rel="modulepreload", qui pré-récupère uniquement un module JavaScript pour qu'il soit prêt lorsqu'un <script> le demande ultérieurement.
Un document HTML peut contenir plusieurs éléments <link> pour différents types de ressources, tels que les feuilles de style, les icônes et le contenu préchargé. Ils appartiennent tous à la section <head> du document, généralement avant la balise fermante </head>.
Syntaxe
La balise <link> est vide, ce qui signifie que la balise fermante n'est pas obligatoire. Elle ne contient que des attributs. Mais en XHTML, la balise <link> doit être fermée (<link/>).
Exemple de la balise HTML <link> :
Balise 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>Dans cet exemple, la page ne possède aucun style propre. Toutes les règles qui contrôlent l'apparence du titre et du paragraphe se trouvent dans le fichier externe style.css, que l'élément <link> importe. Ouvrez l'éditeur en direct ci-dessus et modifiez style.css pour voir les changements s'appliquer au balisage.
Lier un favicon
Un favicon est la petite icône affichée dans l'onglet du navigateur et dans les favoris. On le déclare avec rel="icon". L'attribut type indique au navigateur le format de l'image, et sizes permet d'offrir plusieurs résolutions pour que le navigateur choisisse la meilleure.
<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" marque une icône redimensionnable (telle que .ico ou .svg) ; sinon, utilisez LARGEURxHAUTEUR (par exemple 32x32) par fichier.
Préchargement des ressources avec rel="preload"
rel="preload" indique au navigateur de récupérer une ressource tôt, avec une haute priorité, avant que l'analyseur ne la découvre normalement. Cela n'applique pas la ressource — cela la télécharge seulement pour que le fichier soit déjà en cache quand il est nécessaire.
Lorsque vous utilisez preload, l'attribut as est obligatoire. Il indique au navigateur le type de ressource afin qu'il puisse définir la priorité correcte, appliquer le bon en-tête Accept, et déclencher les vérifications CORS et Content-Security-Policy appropriées.
<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>Une feuille de style préchargée a toujours besoin d'un lien rel="stylesheet" normal (ou d'un <style>/@import) pour être réellement appliquée à la page — preload seul ne fait que la télécharger.
Indices de ressources : preload vs prefetch vs preconnect vs dns-prefetch
Ces quatre valeurs rel contribuent toutes à la performance, mais elles résolvent des problèmes différents et ne sont pas interchangeables :
Valeur rel | Ce qu'elle fait | À utiliser pour |
|---|---|---|
preload | Télécharge une ressource dont la page actuelle a bientôt besoin, avec une haute priorité. | CSS critique, polices, l'image LCP — fichiers qui seraient autrement découverts tardivement. |
prefetch | Télécharge une ressource dont une future navigation aura probablement besoin, avec une faible priorité. | Les ressources pour la prochaine page que l'utilisateur visitera probablement. |
preconnect | Ouvre la connexion (DNS + TCP + poignée de main TLS) vers une origine différente à l'avance. | Les origines depuis lesquelles vous ferez certainement des requêtes prochainement, comme un hôte de polices ou d'API. |
dns-prefetch | Résout uniquement le DNS pour une origine. Moins coûteux que preconnect, et un bon repli. | Les origines que vous pourriez utiliser, ou comme complément à preconnect pour les anciens navigateurs. |
<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>Règle générale : preload pour cette page, prefetch pour la prochaine page, et preconnect / dns-prefetch pour préchauffer les connexions vers d'autres origines.
Versions alternatives avec rel="alternate"
rel="alternate" pointe vers une représentation alternative du document courant. Combiné avec hreflang, il indique aux moteurs de recherche quelle URL sert quelle langue ou région — essentiel pour les sites multilingues.
<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>La même valeur rel déclare également des alternatives non-HTML, comme un flux RSS :
<link rel="alternate" type="application/rss+xml" title="RSS Feed" href="/feed.xml" />crossorigin et integrity
L'attribut crossorigin contrôle si la requête cross-origin est effectuée avec CORS, et si les identifiants (cookies) sont envoyés :
crossorigin="anonymous"(ou simplementcrossorigin) — effectue une requête CORS sans identifiants.crossorigin="use-credentials"— effectue une requête CORS incluant les identifiants.
Vous avez besoin de crossorigin chaque fois que le navigateur doit lire la réponse entre origines, le plus souvent pour les polices (qui sont toujours récupérées en mode CORS) et pour toute ressource que vous protégez avec integrity.
L'attribut integrity active l'intégrité des sous-ressources (SRI). Vous fournissez un hachage cryptographique du fichier ; le navigateur récupère la ressource, la hache, et refuse de l'appliquer si les hachages ne correspondent pas. Cela vous protège si un CDN est compromis ou si un fichier est falsifié.
<link
rel="stylesheet"
href="https://cdn.example.com/bootstrap.min.css"
integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM"
crossorigin="anonymous"
/>Le format du hachage est <algorithme>-<hachage-base64> (algorithmes autorisés : sha256, sha384, sha512). Comme la vérification d'intégrité doit lire la réponse, un lien integrity vers une autre origine doit également définir crossorigin.
Attributs
| Attribut | Valeur | Description |
|---|---|---|
| as | content_type | Spécifie le type de contenu chargé. Obligatoire lorsque rel="preload". |
| charset | char_encoding | Définit l'encodage du document lié. Obsolète en HTML5. |
| crossorigin | anonymous use-credentials | Configure les paramètres CORS pour la ressource liée. |
| href | URL | Définit l'URL du fichier externe. |
| hreflang | language_code | Définit la langue du texte du document lié. |
| integrity | hash_value | Active l'intégrité des sous-ressources pour vérifier les ressources récupérées. |
| media | media_query | Définit le dispositif pour lequel les styles seront appliqués. |
| rel | alternate author bookmark dns-prefetch first help icon last license next nofollow noreferrer pingback preload prefetch prev search stylesheet tag preconnect manifest modulepreload | Définit la relation entre le document courant et le fichier lié. Valeurs courantes : stylesheet (lie un fichier CSS), icon (lie un favicon), preload (précharge une ressource), alternate (lie à une version alternative du document). |
| rev | reversed relationship | Définit la relation entre le document courant et le document lié. Obsolète en HTML5. |
| sizes | Width x Height | Définit la taille des icônes associées. Utilisé uniquement avec rel="icon". |
| type | media_type | Définit le type MIME (spécification pour le transfert réseau de différents types de fichiers) du document lié. Remarque : lors de la liaison d'une feuille de style, type="text/css" est optionnel et vaut CSS par défaut. |
La balise <link> prend également en charge les Attributs globaux et les Attributs d'événements.
Ressources associées
- Balise HTML
<head>— où appartient chaque élément<link>. - Balise HTML
<script>— la bonne façon de charger JavaScript. - Balise HTML
<style>— intégrez CSS directement au lieu de lier un fichier. - Introduction à CSS — comment fonctionnent réellement les feuilles de style que vous liez.