La balise <link> est utilisée pour établir une relation entre un document HTML et une ressource externe.
Elle est principalement utilisée pour lier des feuilles de style (CSS) au document, mais elle peut également être utilisée pour indiquer des relations comme les icônes de site (favicon) ou pour précharger certaines ressources.
Elle se place uniquement dans la balise <head> du document HTML.
Structure et syntaxe de la balise <link>
Structure et syntaxe de base
La balise <link> est une balise autonome (elle se ferme sur elle-même), elle n'a donc pas de balise de fermeture.
Voici sa structure générale :
<link rel="[relation]" href="[URL de la ressource]">Nous devons préciser deux choses :
rel- Quelle sera la relation entre le document actuel et la ressource située dans l'attributhref;href- L'endroit où se situe la ressource dont on souhaite établir le lien.
Exemples d'utilisation
Lier une feuille de style
<link rel="stylesheet" href="styles.css">Dans cet exemple, nous utilisons le type de relation stylesheet pour établir un lien entre le fichier HTML actuel et le fichier styles.css.
Lier avec un favicon
<link rel="icon" href="favicon.ico" type="image/x-icon">Ici, nous utilisons le type de relation icon pour préciser l'icône qui devra être utilisée. Notez bien que pour ce type de relation, il est important de préciser le type de l'image obligatoirement.
Exemple complet
<!DOCTYPE html>
<html lang="fr">
<head>
<link rel="stylesheet" href="styles/main.css">
<link rel="icon" href="images/favicon.png" type="image/png">
<link rel="preload" href="scripts/main.js" as="script">
</head>
<body>
<h1>Bienvenue sur mon site</h1>
</body>
</html>Dans cet exemple, nous combinons plusieurs types de relations pour spécifier :
- Une feuille de style CSS (
rel="stylesheet") ; - Une icône pour le navigateur (
rel="icon") ; - Un fichier JavaScript à précharger (
rel="preload").
Attributs
| Attribut | Description | Exemple |
|---|---|---|
rel | Définit la relation entre le document actuel et la ressource liée (liste des valeurs juste après). | rel="stylesheet" |
href | Spécifie l'URL de la ressource à lier. | href="styles.css" |
type | Spécifie le type MIME de la ressource liée. | type="text/css" |
media | Indique le type de média pour lequel la ressource est appelée. | media="screen" |
as | Indique le type de contenu pour les préchargements. | as="script" |
crossorigin | Spécifie si la ressource doit être récupérée avec des informations d'identité (CORS). | crossorigin="anonymous" |
sizes | Définit les dimensions des icônes pour les relations comme rel="icon". | sizes="16x16" |
Plus généralement, on utilise surtout les attributs rel, href, type et plus rarement media avec la balise <link>.
Voici les différentes valeurs pour vos relations (avec l'attribut rel donc si vous suivez bien 👀) :
| Valeur | Description |
|---|---|
stylesheet | Lien vers une feuille de style CSS externe. |
icon | Définit l'icône du site (favicon). |
alternate | Lien vers une version alternative du contenu (ex. flux RSS). |
preload | Indique une ressource à précharger pour optimisation. |
Compatibilité des navigateurs
L'instruction <link> est compatible avec tous les navigateurs.
| Elément | Google Chrome | Safari | Mozilla Firefox | Edge |
| <link> | Oui | Oui | Oui | Oui |