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, vers les icônes utilisées en barre de titre ou comme icône d'application sur les appareils mobiles.
Pour lier une feuille de style externe, on inclut un élément <link> de la forme suivante à l'intérieur de l'élément {{htmlelement("head")}} :
<link href="main.css" rel="stylesheet">
Dans cet exemple, on indique le chemin vers la feuille de style grâce à l'attribut href, l'attribut rel possède une valeur stylesheet qui indique que c'est une feuille de style. rel signifie relationship qui correspond donc à la relation entre la ressource et le document courant. Il existe de nombreux types de liens possibles.
Certains types sont assez fréquents. Ainsi, pour l'icône présentant le site dans l'onglet, on trouvera :
<link rel="icon" href="favicon.ico">
Il existe différents types de relations pour préciser les icônes et qui permettent notamment de cibler certaines plateformes mobiles :
<link rel="apple-touch-icon-precomposed" sizes="114x114"
href="apple-icon-114.png" type="image/png">
L'attribut sizes indique la taille de l'icône tandis que l'attribut type contient le type MIME de la ressource qui est liée. Ces attributs permettent alors au navigateur de sélectionner la ressource la plus adéquate.
On peut également fournir l'attribut media afin d'utiliser telle ou telle ressource lorsqu'une requête média est vérifiée. Ainsi, on pourra utiliser ce qui suit afin d'avoir une feuille de style utilisée à l'impression et une autre dédiée au mobile :
<link href="print.css" rel="stylesheet" media="print"> <link href="mobile.css" rel="stylesheet" media="screen and (max-width: 600px)">
Certaines fonctionnalités relatives à la sécurité sont également disponibles avec certains attributs de <link>. Dans cet exemple :
<link rel="preload" href="myFont.woff2" as="font"
type="font/woff2" crossorigin="anonymous">
L'attribut rel vaut preload et indique que le navigateur doit précharger la ressource (voir Le préchargement du contenu avec rel="preload" pour plus de détails), l'attribut as indique la classe de contenu qui est récupéré et l'attribut crossorigin indique si la ressource doit être récupérée avec une requête CORS.
Quelques notes d'utilisation :
<link> element peut être placé dans un élément {{HTMLElement("head")}} ou {{htmlelement("body")}} selon la valeur de la relation. C'est cependant une bonne pratique que de placer l'ensemble des éléments <link> dans l'élément <head>.<link> est utilisé pour la favicon d'un site et que celui-ci utilise les règles CSP afin d'améliorer la sécurité, les règles s'appliquent également aux icônes. Aussi, si la favicon ne charge pas, veuillez vérifier que la directive img-src de l'en-tête {{HTTPHeader("Content-Security-Policy")}} ne bloque pas le chargement de l'image.<link> mais leur utilisation reste incertaine.<link> devaient utiliser une barre oblique de fin : <link />.next pour l'attribut rel afin de précharger la page suivante pour une série de documents.Cet élément inclut les attributs universels.
rel="preload" ou rel="prefetch" 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 {{httpheader("Accept")}}."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 site d'origine (c'est-à-dire sans utiliser l'en-tête HTTP {{httpheader("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 {{httpheader("Access-Control-Allow-Credentials")}}, l'image sera corrompue et son utilisation sera restreinte.anonymous. Pour plus d'informations, consulter l'article sur le contrôle d'origine HTTP (CORS).Cet attribut est uniquement utilisable avec les liens avec rel="stylesheet". L'attribut booléen disabled indique si la feuille de style référencée devrait être chargée et appliquée au document. Si l'attribut disabled est indiqué dans le document HTML lors de son chargement, la feuille de style ne sera pas chargé au chargement de la page. La feuille de style sera uniquement chargée à la demande si (et lorsque) l'attribut disabled est retiré ou passé à falsevia un script.
Toutefois, une fois que la feuille de style a été chargée, toute modification à l'attribut disabled n'aura aucun impact, sa valeur ne sera pas liée à la propriété {{domxref("StyleSheet.disabled")}}. Modifier cet attribut ne fait qu'activer/désactiver la capacité de charger et d'appliquer la feuille de style au document.
Cette propriété est à distinguer de la propriété disabled de l'interface {{domxref("StyleSheet")}} : lorsqu'on utilise celle-ci, la feuille de style est retirée de {{domxref("document.styleSheets")}} et elle n'est pas rechargée automatiquement lorsqu'on la repasse à false.
href est présent.autohighlowNote : L'attribut importance peut uniquement être utilisé sur l'élément link si rel vaut "preload" ou "prefetch".
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 :
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.'no-referrer' : l'en-tête {{HTTPHeader("Referer")}} n'est pas envoyé'no-referrer-when-downgrade' signifie qu'aucun en-tête {{HTTPHeader("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.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.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).<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 :
apple-touch-icon et apple-touch-startup-icon.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.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é).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 : cet attribut est obsolète et ne doit pas être utilisé. Pour obtenir l'effet escompté, on utilisera l'en-tête HTTP {{httpheader("Content-Type")}} pour la ressource liée.
methods.rel. Les types de lien utilisés pour cet attribut sont semblables aux valeurs autorisés par {{htmlattrxref("rel", "link")}}.
Note : cet attribut est obsolète en HTML5 et ne doit pas être utilisé. Pour obtenir le même effet, on utilisera l'attribut {{htmlattrxref("rel", "link")}} 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.
Note : La spécification actuelle de HTML 5.2 du W3C n'indique plus l'attribut rev comme obsolète. En revanche, la spécification du WHATWG le considère toujours comme obsolète. Tant que cette incohérence n'est pas résolue, mieux vaut considérer cet attribut comme obsolète.
Pour associer une feuille de style à la page courante, on utilisera la syntaxe suivante :
<link href="style.css" rel="stylesheet">
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">
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.
preloadDe nombreux exemples avec <link rel="preload"> peuvent être lus sur Précharger des ressources grâce à rel="preload".
<link> peut être utilisé à l'intérieur d'un élément {{HTMLElement("head")}} ou bien dans le corps du document ({{HTMLElement("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>.href, rel, rev et title pour l'élément <link>.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.<link>.<link> ait une barre oblique avant le chevron fermant.| Catégories de contenu | Contenu de métadonnées. Si {{htmlattrxref("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 {{htmlattrxref("itemprop")}} est présent, tout élément qui accepte du contenu phrasé. |
| Rôles ARIA autorisés | Aucune. |
| Interface DOM | {{domxref("HTMLLinkElement")}} |
| Spécification | État | Commentaires |
|---|---|---|
| {{SpecName("Subresource Integrity", "#HTMLLinkElement", "lt;link>")}} | {{Spec2('Subresource Integrity')}} | Ajout de l'attribut integrity. |
| {{SpecName('HTML WHATWG', 'semantics.html#the-link-element', '<link>')}} | {{Spec2('HTML WHATWG')}} | Aucune modification depuis la dernière dérivation. |
| {{SpecName('HTML5 W3C', 'document-metadata.html#the-link-element', '<link>')}} | {{Spec2('HTML5 W3C')}} | 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. |
| {{SpecName('HTML4.01', 'struct/links.html#h-12.3', '<link>')}} | {{Spec2('HTML4.01')}} | |
| {{SpecName("Preload")}} | {{Spec2("Preload")}} | Définition de <link rel="preload"> et de l'attribut as. |
| {{SpecName('Resource Hints','#prefetch','prefetch')}} | {{Spec2('Resource Hints')}} | Ajout des valeurs dns-prefetch, preconnect, prefetch et prerender. |
{{Compat("html.elements.link",3)}}
<script> et <link>