L'élément HTML <link> définit la relation entre le document courant et une ressource externe. Cet élément peut être utilisé pour définir un lien vers une feuille de style ou un cadre de navigation (accéder à la même page dans une langue différente par exemple).

Catégories de contenu Contenu de métadonnées. Si itemprop est présent : contenu de flux et contenu phrasé.
Contenu autorisé Aucun, cet élément est un élément vide.
Omission de balise La balise de début doit être présente et la balise de fin ne doit pas être présente.
Parents autorisés Tout élément qui accepte des éléments de métadonnées. Si l'attribut itemprop est présent, tout élément qui accepte du contenu phrasé.
Rôles ARIA autorisés Aucune.
Interface DOM HTMLLinkElement

Attributs

Cet élément inclut les attributs universels.

as
Cet attribut est uniquement utilisé lorsque rel="preload" est utilisé pour l'élément <link>. L'attribut indique le type de contenu chargé par l'élément <link> et permet au navigateur de déterminer la priorité du contenu, d'identifier les utilisations de la ressource plus bas dans le document, d'appliquer la bonne politique de sécurité des contenus et de définir le bon en-tête de requête Accept.
crossorigin
Cet attribut à valeur contrainte indique si le CORS doit être utilisé lorsque la ressource liée est récupérée. Les images avec CORS activé peuvent être réutilisée dans un élément <canvas> sans qu'il soit corrompu. Les valeurs autorisées sont :
  • "anonymous" : une requête cross-origine est effectuée (avec l'en-tête HTTP Origin). Mais aucune information d'identification n'est envoyée (aucun cookie, aucun certificat X.509, aucune authentification simple via HTTP). Si le serveur ne fournit pas d'informations au d'origine (c'est-à-dire sans utiliser l'en-tête HTTP Access-Control-Allow-Origin, l'image sera corrompue et son utilisation sera restreinte.
  • "use-credentials" : une requête cross-origine est effectuée (avec l'en-tête HTTP Origin) avec des informations d'authentification qui sont envoyées (un cookie, un certification et une authentification HTTP simple sont envoyés). Si le serveur ne fournit pas d'information d'authentification au site d'origine via l'en-tête Access-Control-Allow-Credentials, l'image sera corrompue et son utilisation sera restreinte.
Lorsque l'attribut est absent, la ressource est récupérée sans requête CORS (c'est-à-dire sans envoyer l'en-tête Origin) ce qui empêche de l'utiliser dans les éléments qui ne doivent pas être corrompus tels que <canvas>. Si la valeur est invalide, elle est synonyme de anonymous. Pour plus d'informations, consulter l'article sur le contrôle d'origine HTTP (CORS).
href
Cet attribut définit l'URL de la ressource liée. L'URL utilisée peut être absolue ou relative.
hreflang
Cet attribut, purement indicatif, définit la langue de la ressource liée. La valeur doit être une balise de langue BCP47 valide. Cet attribut doit uniquement être utilisé si l'attribut href est présent.
integrity
Cet attribut contient des métadonnées en ligne qui correspondent à l'empreinte cryptographique de la ressource qu'on souhaite récupérer. Cela permet à l'agent utilisateur de contrôler que la ressource récupérée n'a pas été manipulée. Pour plus d'informations, consulter l'article sur le contrôle des sous-ressources.
media
Cet attribut indique le média auquel s'applique la ressource liée. Sa valeur doit être une requête média. Cet attribut est principalement utilisé pour permettre à l'agent utilisateur de sélectionner la meilleure feuille de style en fonction de l'appareil de l'utilisateur.
Note d'utilisation :
  • En HTML4, la valeur de cet attribut était une liste de descripteurs de médias (des types ou des groupes de média) séparés par des espaces, par exemple print screen aural braille. HTML5 étend cet attribut à l'ensemble des requêtes média qui forment un surensemble des valeurs autorisées en HTML 4.
  • Les navigateurs qui ne prennent pas en charge les requêtes média CSS3 ne reconnaîtront pas nécessairement les liens adéquats et il faut donc toujours fournir des liens de recours.
prefetch
Cet attribut permet d'identifier une ressource qui sera nécessaire dans la suite de la navigation et que l'agent utilisateur devrait télécharger. Cela permet à l'agent utilisateur d'avoir un meilleur temps de réponse lorsque la ressource sera nécessaire.
referrerpolicy
Une chaîne de caractères qui indique le référent à utiliser lors de la récupération de la ressource :
  • 'no-referrer' : l'en-tête Referer n'est pas envoyé
  • 'no-referrer-when-downgrade' signifie qu'aucun en-tête Referer ne sera envoyé lors de la navigation vers une origine non protégée par TLS (HTTPS). C'est le comportement par défaut de l'agent utilisateur si aucune autre règle n'est indiquée.
  • 'origin' indique que le référent sera l'origine de la page (ce qui correspond approximativement au schéma, à l'hôte et au port).
  • 'origin-when-cross-origin' indique que lorsqu'on navigue vers d'autres origines, le référent se limitera au schéma, à l'hôte et au port et que lorsqu'on navigue sur la même origine, il incluera le chemin.
  • 'unsafe-url' : le référent incluera l'origine et le chemin (mais ni le fragment, ni le mot de passe ou le nom d'utilisateur). Ce comportement n'est pas sécurisé car il peut laisser fuiter des origines et des chemins de ressources TLS vers des origines non-sécurisées.
rel
Cet attribut indique la relation qui existe entre le document et la ressource liée. Cet attribut doit être une liste de types de lien, séparés par des espaces. La plupart du temps, cet attribut est utilisé pour caractériser un lien vers une feuille de style et il vaut alors stylesheet quand l'attribut href reçoit l'URL de la feuille de style à charger. WebTV supporte également la valeur next qui permet de précharger la page suivante d'une série de pages.
sizes
Cet attribut définit les dimensions des icônes pour le média contenu dans la ressource. Cet attribut doit uniquement être présent lorsque rel contient le type de lien icon. Il peut prendre l'une des valeurs suivantes :
  • any : l'icône peut être redimensionnée à volonté car elle utilise un format vectoriel (par exemple image/svg+xml).
  • une liste de tailles, séparées par des espaces, dont chacune est de la forme <largeur en pixels>x<hauteur en pixels> ou <largeur en pixels>X<hauteur en pixels>. Pour chacune de ces dimensions, il doit exister une image correspondante dans la ressource.
Note d'utilisation :
  • La plupart des format d'icône permettent simplement de stocker une seule icône, c'est pour cela que, la plupart du temps, sizes ne contient qu'un seul élément.
  • Safari sur iOS ne prend pas en charge cet attribut mais utilise des types de lien non-standards pour définir l'icône utilisé dans la barre du site ou pour le lancer : apple-touch-icon et apple-touch-startup-icon.
title
L'attribut title possède un sens spécifique pour l'élément <link>. Utilisé pour un lien <link rel="stylesheet">, l'attribut title définit une feuille de style alternative ou une feuille de style préférée. S'il est mal utilisé, la feuille de style pourra être ignorée.
type
Cet attribut est utilisé pour définir le type de contenu auquel le lien fait référence. La valeur de cet attribut doit être un type MIME tel que text/html ou text/css, etc. Le plus souvent, cet attribut est utilsé pour définir le type de feuille de style utilisé et la valeur la plus fréquente est text/css qui indique le format d'une feuille de style en cascade (Cascading Style Sheet pour CSS). Cet attribut est également utilisé pour les liens avec rel="preload" afin de vérifier la prise en charge du format de fichier (si le navigateur ne prend pas en charge ce fichier, il n'est pas téléchargé).

Attributs dépréciés, obsolètes ou non-standard

charset
Cet attribut définit l'encodage de la ressource lié. La valeur de cet attribut est une liste de jeux de caractères (tels que définis dans la RFC RFC 2045) séparés par des espaces ou des virgules. La valeur par défaut de cet attribut est iso-8859-1.
Note d'utilisation : cet attribut est obsolète et ne doit pas être utilisé. Pour obtenir l'effet escompté, on utilisera l'en-tête HTTP Content-Type pour la ressource liée.
disabled
Cet attribut peut être utilisé afin de désactiver la relation vers une ressource. Utilisé avec des scripts, cet attribut peut servir à activer/désactiver certaine des feuilles de style.

Note : bien qu'il n'existe pas d'attribut disabled dans le standard HTML, il existe une propriété disabled pour l'objet HTMLLinkElement du DOM.

L'attribut disabled est non-standard et ne doit pas être utilisé. Pour obtenir un effet similaire à cet attribut, on utilisera une de ces techniques :

  • Si l'attribut disabled est uniquement utilisé de façon statique, il suffit de ne pas inclure l'élément <link> ;
  • Si on souhaite avoir un comportement dynamique, dans un script, on utilisera la propriété disabled de l'objet DOM StyleSheet.
methods
La valeur de cet attribut fournit des informations quant aux fonctions qui peuvent être utilisées sur l'objet lié. Les valeurs sont généralement des méthodes HTTP mais elles peuvent également inclure des informations en avance sur le lien (le navigateur pourrait par exemple choisir un affichage différent pour un lien selon la méthode utilisée). Cet attribut n'est pas pris en charge de façon correcte, y compris par le navigateur qui le définit, Internet Explorer 4. Voir la page MSDN sur la propriété methods.
rev
La valeur de cet attribut décrit le lien entre le document courant et la ressource liée (définie par l'attribut href). Cet attribut définit donc la relation réciproque à la relation décrite par l'attribut rel. Les types de lien utilisés pour cet attribut sont semblables aux valeurs autorisés par rel.
Note d'utilisation : cet attribut est obsolète en HTML5 et ne doit pas être utilisé. Pour obtenir le même effet, on utilisera l'attribut rel avec la valeur réciproque pour le type de lien, (made devrait par exemple être remplacé par author). Cet attribut ne signifie pas « révision » et ne doit pas être utilisé comme un numéro de version.
target
Cet attribut définit le nom de la frame ou de la fenêtre qui contient la ressource liée ou qui affichera la ressource liée.

Exemples

Associer une feuille de style

Pour associer une feuille de style à la page courante, on utilisera la syntaxe suivante :

<link href="style.css" rel="stylesheet">

Fournir des feuilles de style alternatives

Pour un document, on peut indiquer plusieurs feuilles de style alternatives.

L'utilisateur pourra choisir parmi ces feuilles de style via le menu « Affichage > Style de la page ». Ainsi, un utilisateur pourra voir différentes versions d'une même page.

<link href="default.css" rel="stylesheet" title="Mise en forme par défaut">
<link href="joli.css" rel="alternate stylesheet" title="Joli">
<link href="simple.css" rel="alternate stylesheet" title="Simple">

Évènements déclenchés au chargement d'une feuille de style

Il est possible de déterminer si une feuille de style a été chargée en écoutant l'évènement load. De la même façon, un évènement error indiquera qu'une erreur a eu lieu lors du traitement de la feuille de style:

<script>
  function sheetLoaded() {
    // faire quelque chose, sachant
    // que la feuille a été chargéee
  }

  function sheetError() {
    console.log("Erreur lors du chargement de la feuille de style !");
  }
</script>

<link rel="stylesheet" href="mafeuilledestyle.css" 
  onload="sheetLoaded()"
  onerror="sheetError()">
Note : L'évènement load est déclenché une fois que la feuille de style et que le contenu associé ont été chargés et analysés et immédiatement avant que la mise en forme soit appliquée au contenu.

Exemples avec preload

De nombreux exemples avec <link rel="preload"> peuvent être lus sur Précharger des ressources grâce à rel="preload".

Notes

  • Un élément <link> peut être utilisé à l'intérieur d'un élément <head> ou bien dans le corps du document (<body>) si le type de lien le permet (body-ok). On peut par exemple utiliser <link rel="stylesheet"> car ce type de lien est autorisé au sein de l'élément <body>.
  • HTML 3.2 définit uniquement les attributs href, rel, rev et title pour l'élément <link>.
  • HTML 2 définit les attributs href, methods, rel, rev, title et urn pour l'élément <link>. Les attributs methods et urn ont ensuite été retirés des spécifications.
  • Les spécifications HTML et XHTML définissent toutes deux des gestionnaires d'évènements pour l'élément <link>.
  • En XHTML 1.0, il est nécessaire qu'un élément <link> ait une barre oblique avant le chevron fermant.

Spécifications

Spécification État Commentaires
Subresource Integrity
La définition de '<script>' dans cette spécification.
Recommendation Ajout de l'attribut integrity.
HTML Living Standard
La définition de '<link>' dans cette spécification.
Standard évolutif Aucune modification depuis la dernière dérivation.
HTML5
La définition de '<link>' dans cette spécification.
Recommendation Ajout des attributs crossorigin et sizes. Les valeurs de media sont étendues à l'ensemble des requêtes médias, ajout de nombreuses autres valeurs pour rel.
HTML 4.01 Specification
La définition de '<link>' dans cette spécification.
Recommendation  
Preload Version de travail Définition de <link rel="preload"> et de l'attribut as.
Resource Hints
La définition de 'prefetch' dans cette spécification.
Version de travail Ajout des valeurs dns-prefetch, preconnect, prefetch et prerender.

Compatibilité des navigateurs

FonctionnalitéChromeEdgeFirefoxInternet ExplorerOperaSafari
Support simple1.0 (Oui)1.0 (Oui) (Oui) (Oui)
charset1.0 (Oui)1.0 (Oui) (Oui) (Oui)
crossorigin25.0 Non18.0 Non15.0 ?
disabled Non (Oui) Non (Oui) Non Non
href1.0 (Oui)1.0 (Oui) (Oui) (Oui)
hreflang1.0 (Oui)1.0 (Oui) (Oui) (Oui)
integrity45.0 Non ? Non ? Non
media1.0 (Oui)1.0 (Oui) (Oui) (Oui)
methods Non ? Non4.0 Non Non
prefetch56.0 ? ? Non43.0 ?
referrerpolicy58.0 Non50.0 ? ? ?
rel1.0 (Oui)1.0 (Oui) (Oui) (Oui)
rev1.0 (Oui)1.0 (Oui) (Oui) (Oui)
sizes Non Non Non1 Non Non Non
target1.0 (Oui)1.0 (Oui) (Oui) (Oui)
title1.0 (Oui)1.0 (Oui) (Oui) (Oui)
type1.0 (Oui)1.0 (Oui) (Oui) (Oui)
FonctionnalitéAndroidChrome for AndroidEdge mobileFirefox for AndroidIE mobileOpera AndroidiOS Safari
Support simple (Oui) (Oui) (Oui)1.0 (Oui) (Oui) (Oui)
charset (Oui) (Oui) (Oui)1.0 (Oui) (Oui) (Oui)
crossorigin ? (Oui) Non18.0 Non ? ?
disabled Non Non (Oui) Non ? Non Non
href (Oui) (Oui) (Oui)1.0 (Oui) (Oui) (Oui)
hreflang (Oui) (Oui) (Oui)1.0 (Oui) (Oui) (Oui)
integrity45.045.0 Non ? Non ? Non
media (Oui) (Oui) (Oui)1.0 (Oui) (Oui) (Oui)
methods Non Non ? Non4.0 Non Non
prefetch56.056.0 ? ? Non43.0 ?
referrerpolicy58.058.0 Non50.0 ? ? ?
rel (Oui) (Oui) (Oui)1.0 (Oui) (Oui) (Oui)
rev (Oui) (Oui) (Oui)1.0 (Oui) (Oui) (Oui)
sizes Non Non Non Non1 Non Non Non
target (Oui) (Oui) (Oui)1.0 (Oui) (Oui) (Oui)
title (Oui) (Oui) (Oui)1.0 (Oui) (Oui) (Oui)
type (Oui) (Oui) (Oui)1.0 (Oui) (Oui) (Oui)

1. See bug 441770.

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : SphinxKnight, Fredchat, louuis, tregagnon, BenoitL, Mgjbot
 Dernière mise à jour par : SphinxKnight,