Cette page a été traduite à partir de l'anglais par la communauté.Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.

View in EnglishAlways switch to English

<link> : l'élément de lien vers des ressources externes

Baseline Widely available *

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis ⁨juillet 2015⁩.

* Certaines parties de cette fonctionnalité peuvent bénéficier de prise en charge variables.

L'élémentHTML<link> définit la relation entre le document courant et une ressource externe. Cet élément peut être utilisé pour définir un lien versune feuille de style, vers les icônes utilisées en barre de titre ou comme icône d'application sur les appareils mobiles.

Exemple interactif

<link href="/shared-assets/misc/link-element-example.css" rel="stylesheet" /><p>Ce texte sera rouge comme défini dans la feuille de style externe.</p><p>  L'attribut <code>style</code> peut cependant le remplacer.</p>

Pour lier une feuille de style externe, on inclut un élément<link> de la forme suivante à l'intérieur de l'élément<head> :

html

<link href="main.css" rel="stylesheet" />

Dans cet exemple, on indique le chemin vers la feuille de style grâce à l'attributhref, l'attributrel possède une valeurstylesheet qui indique que c'est une feuille de style.rel signifierelationship qui correspond donc à la relation entre la ressource et le document courant. Il existe denombreux types de liens possibles.

Certains types sont assez fréquents. Ainsi, pour l'icône présentant le site dans l'onglet, on trouvera :

html

<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 :

html

<link  rel="apple-touch-icon"  sizes="114x114"  href="favicon114.png"  type="image/png" />

L'attributsizes indique la taille de l'icône tandis que l'attributtype 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'attributmedia 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 :

html

<link href="print.css" rel="stylesheet" media="print" /><link href="mobile.css" rel="stylesheet" media="screen and (width <= 600px)" />

Certaines fonctionnalités relatives à la sécurité sont également disponibles avec certains attributs de<link>. Dans cet exemple :

html

<link  rel="preload"  href="myFont.woff2"  as="font"  type="font/woff2"  crossorigin="anonymous" />

L'attributrel vautpreload et indique que le navigateur doit précharger la ressource (voirLe préchargement du contenu avecrel="preload" pour plus de détails), l'attributas indique la classe de contenu qui est récupéré et l'attributcrossorigin indique si la ressource doit être récupérée avec une requête CORS.

Quelques notes d'utilisation :

Un élément<link> peut être utilisé dans l'élément<head> ou<body>, selon qu'il possède untype de lien^(angl.)body-ok.Par exemple, le type de lienstylesheet est body-ok, donc<link rel="stylesheet"> est autorisé dans le corps du document.Cependant, il n'est pas recommandé de procéder ainsi : il est préférable de séparer vos éléments<link> du contenu du corps, en les plaçant dans le<head>.
Lorsque vous utilisez<link> pour définir une favicon sur un site qui utilise une politique de sécurité de contenu (CSP), cette politique s'applique aussi à la favicon.Si la favicon ne se charge pas, vérifiez que l'en-têteContent-Security-Policy et sadirectiveimg-src n'empêchent pas son accès.
Les spécifications HTML et XHTML définissent des gestionnaires d'évènements pour l'élément<link>, mais leur usage n'est pas clairement documenté.
En XHTML 1.0, leséléments vides comme<link> nécessitent une barre oblique finale :<link />.
WebTV prend en charge la valeurnext pourrel afin de précharger la page suivante d'une série de documents.

Attributs

Cet élément inclutles attributs universels.

as

Cet attribut est requis lorsquerel="preload" est utilisé sur l'élément<link>, optionnel lorsquerel="modulepreload" est utilisé, et ne doit pas être utilisé dans les autres cas.Il précise le type de contenu chargé par l'élément<link>, ce qui est nécessaire pour faire correspondre la requête, appliquer labonne politique de sécurité de contenu et définir le bon en-tête de requêteAccept.

De plus,rel="preload" utilise cette valeur comme signal de priorité pour la requête.Le tableau ci-dessous liste les valeurs valides pour cet attribut et les éléments ou ressources auxquels elles s'appliquent.

Valeur	S'applique à
audio	Élément`<audio>`
document	Éléments`<iframe>` et`<frame>`
embed	Élément`<embed>`
fetch	fetch, XHR Remarque : Cette valeur nécessite aussi que`<link>` contienne l'attribut`crossorigin`. Voirrécupérations compatibles CORS.
font	CSS @font-face Remarque : Cette valeur nécessite aussi que`<link>` contienne l'attribut`crossorigin`. Voirrécupérations compatibles CORS.
image	Éléments`<img>` et`<picture>` avec les attributs`srcset` ou`imageset`, éléments SVG`<image>`, règles CSS`*-image`
object	Élément`<object>`
script	Élément`<script>`, Worker`importScripts`
style	Élément`<link rel=stylesheet>`, CSS`@import`
track	Élément`<track>`
video	Élément`<video>`
worker	Worker, SharedWorker

blocking

Cet attribut indique explicitement que certaines opérations doivent être bloquées jusqu'à ce que des conditions spécifiques soient remplies. Il ne doit être utilisé que lorsque l'attributrel contient les mots-clésexpect oustylesheet. Avecrel="expect", il indique que des opérations doivent être bloquées jusqu'à ce qu'un nœud DOM spécifique ait été analysé. Avecrel="stylesheet", il indique que des opérations doivent être bloquées jusqu'à ce qu'une feuille de style externe et ses sous-ressources critiques aient été récupérées et appliquées au document. Les opérations à bloquer doivent être une liste, séparée par des espaces, de jetons de blocage listés ci-dessous. Actuellement, il n'existe qu'un seul jeton :

render : Le rendu du contenu à l'écran est bloqué.

Note :Seuls les éléments HTMLlink présents dans l'en-tête<head> du document peuvent bloquer le rendu. Par défaut, un élément HTMLlink avecrel="stylesheet" dans le<head> bloque le rendu lorsque le navigateur le découvre lors de l'analyse. Si un tel élément HTMLlink est ajouté dynamiquement via un script, il faut également définirblocking = "render" pour qu'il bloque le rendu.

crossorigin

Cetattribut énuméré indique siCORS doit être utilisé lors de la récupération de la ressource.CORS-enabled images peuvent être réutilisées dans l'élément<canvas> sans êtrecorrompues.Les valeurs autorisées sont :

anonymous: Une requête cross-origin (c'est-à-dire avec l'en-tête HTTPOrigin) est effectuée, mais aucune information d'identification n'est envoyée (aucun cookie, certificat X.509 ou authentification HTTP de base).Si le serveur ne fournit pas d'autorisation au site d'origine (en n'envoyant pas l'en-tête HTTPAccess-Control-Allow-Origin), la ressource sera corrompue et son utilisation restreinte.
use-credentials: Une requête cross-origin (avec l'en-tête HTTPOrigin) est effectuée avec des informations d'identification envoyées (cookie, certificat et/ou authentification HTTP de base).Si le serveur ne fournit pas d'autorisation d'identification au site d'origine (via l'en-têteAccess-Control-Allow-Credentials), la ressource seracorrompue et son utilisation restreinte.

Si l'attribut n'est pas présent, la ressource est récupérée sans requêteCORS (c'est-à-dire sans envoyer l'en-têteOrigin), ce qui empêche son utilisation non corrompue. Si la valeur est invalide, elle est traitée comme si le mot-clé énuméréanonymous était utilisé.Voirattributs de configuration CORS pour plus d'informations.

disabled

Cet attribut booléen n'est utilisable qu'avecrel="stylesheet". Il indique si la feuille de style référencée doit être chargée et appliquée au document.Sidisabled est présent dans le HTML lors du chargement, la feuille de style ne sera pas chargée au chargement de la page.Elle ne sera chargée qu'à la demande, si (et lorsque) l'attributdisabled est retiré ou passé àfalse via un script.

Modifier la propriétédisabled dans le DOM retire la feuille de style de la listeDocument.styleSheets du document.

fetchpriority

Fournit une indication sur la priorité relative à utiliser lors de la récupération d'une ressource d'un type particulier.Valeurs autorisées :

high: Récupère la ressource avec une priorité élevée par rapport aux autres ressources du même type.
low: Récupère la ressource avec une priorité faible par rapport aux autres ressources du même type.
auto: N'indique aucune préférence pour la priorité de récupération.Il s'agit de la valeur par défaut.Elle est utilisée si aucune valeur ou une valeur invalide est définie.

VoirHTMLLinkElement.fetchPriority pour plus d'informations.

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 unebalise de langue BCP47 valide. Cet attribut doit uniquement être utilisé si l'attributhref est présent.

imagesizes

Pourrel="preload" etas="image" uniquement, l'attributimagesizes utilise une syntaxe et une sémantique similaires à l'attributsizes, ce qui permet de précharger la ressource appropriée utilisée par un élémentimg avec des valeurs correspondantes pour ses attributssrcset etsizes.

imagesrcset

Pourrel="preload" etas="image" uniquement, l'attributimagesrcset utilise une syntaxe et une sémantique similaires à l'attributsrcset, ce qui permet de précharger la ressource appropriée utilisée par un élémentimg avec des valeurs correspondantes pour ses attributssrcset etsizes.

integrity

Contient des métadonnées en ligne : une empreinte cryptographique (hachage base64) de la ressource (fichier) que vous demandez au navigateur de récupérer.Le navigateur peut utiliser cette empreinte pour vérifier que la ressource récupérée n'a pas été modifiée de façon inattendue.Cet attribut ne doit être utilisé que lorsque l'attributrel vautstylesheet,preload oumodulepreload.VoirSubresource Integrity.

media

Cet attribut indique le média auquel s'applique la ressource liée. Sa valeur doit être un type de média ou unerequête média.Cet attribut est principalement utilisé pour lier des feuilles de style externes : il permet à l'agent utilisateur de sélectionner la plus adaptée à l'appareil utilisé.

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 signifie que l'en-têteReferer n'est pas envoyé.
no-referrer-when-downgrade signifie qu'aucun en-têteReferer n'est envoyé lors d'une navigation vers une origine non protégée par TLS (HTTPS).Il s'agit du comportement par défaut de l'agent utilisateur si aucune autre règle n'est précisée.
origin signifie que le référent sera l'origine de la page (schéma, hôte et port).
origin-when-cross-origin signifie que lors d'une navigation vers d'autres origines, le référent se limite au schéma, à l'hôte et au port, tandis que sur la même origine, le chemin est inclus.
unsafe-url signifie que le référent inclut l'origine et le chemin (mais ni le fragment, ni le mot de passe ou le nom d'utilisateur).Ce cas 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 lié et le document courant. L'attribut doit être une liste, séparée par des espaces, detypes de lien.

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 lorsquerel contient le type de lienicon. Il peut prendre l'une des valeurs suivantes :

any : l'icône peut être redimensionnée à volonté car elle utilise un format vectoriel (par exempleimage/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 :

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.Le format ICO de Microsoft et le format ICNS d'Apple peuvent stocker plusieurs tailles d'icônes dans un seul fichier. ICO est mieux pris en charge par les navigateurs, il est donc recommandé d'utiliser ce format si la compatibilité inter-navigateurs est importante.

title

L'attributtitle a une sémantique particulière sur l'élément<link>.Lorsqu'il est utilisé sur un<link rel="stylesheet">, il définit unefeuille de style par défaut ou alternative.

type

Cet attribut est utilisé pour définir le type du contenu lié.La valeur de l'attribut doit être un type MIME tel quetext/html,text/css, etc.L'usage courant de cet attribut est de définir le type de feuille de style référencée (commetext/css), mais étant donné que CSS est le seul langage de feuille de style utilisé sur le web, il est non seulement possible d'omettre l'attributtype, mais c'est même la pratique recommandée.Il est aussi utilisé sur les liensrel="preload", pour s'assurer que le navigateur ne télécharge que les types de fichiers qu'il prend en charge.

Attributs non-standard

targetNon standard Obsolète: Cet attribut définit le nom de laframe ou de la fenêtre qui contient la ressource liée ou qui affichera la ressource liée.

Attributs obsolètes

charsetObsolète: 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 RFCRFC 2045) séparés par des espaces ou des virgules. La valeur par défaut de cet attribut estiso-8859-1.
Note :Pour obtenir l'effet escompté, on utilisera l'en-tête HTTPContent-Type pour la ressource liée.
revObsolète: La valeur de cet attribut décrit le lien entre le document courant et la ressource liée (définie par l'attributhref). Cet attribut définit donc la relation réciproque à la relation décrite par l'attributrel.Les types de lien utilisés pour cet attribut sont semblables aux valeurs autorisés parrel.
Note :Au lieu derev, vous devez utiliser l'attributrel avec la valeur de type de lien opposéepour le type de lien.Par exemple, pour établir le lien réciproque demade, indiquezauthor. De plus, cet attributne signifie pas « révision » et ne doit pas être utilisé comme numéro de version, même si de nombreux sites en font un mauvais usage.

Exemples

Associer une feuille de style

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

html

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

Fournir des feuilles de style alternatives

Pour un document, on peut indiquerplusieurs 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.

html

<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" />

Fournir des icônes pour différents contextes d'usage

Vous pouvez inclure des liens vers plusieurs icônes sur la même page, et le navigateur choisira celle qui convient le mieux à son contexte particulier en utilisant les valeursrel etsizes comme indications.

html

<!-- iPad Pro avec écran Retina haute résolution : --><link  rel="apple-touch-icon"  sizes="167x167"  href="/apple-touch-icon-167x167.png" /><!-- iPhone résolution 3x : --><link  rel="apple-touch-icon"  sizes="180x180"  href="/apple-touch-icon-180x180.png" /><!-- iPad non-Retina, iPad mini, etc. : --><link  rel="apple-touch-icon"  sizes="152x152"  href="/apple-touch-icon-152x152.png" /><!-- iPhone résolution 2x et autres appareils : --><link rel="apple-touch-icon" href="/apple-touch-icon-120x120.png" /><!-- favicon de base --><link rel="icon" href="/favicon.ico" />

Pour savoir quelles valeurs desizes choisir pour les icônes Apple, consultezla documentation Apple sur la configuration des applications web^(angl.) et lesApple human interface guidelines^(angl.) référencées. En général, il suffit de fournir une grande image, comme 192x192, et de laisser le navigateur la redimensionner selon les besoins, mais vous pouvez fournir des images avec différents niveaux de détail pour différentes tailles, comme le recommande le guide Apple. Fournir des icônes plus petites pour les basses résolutions permet aussi d'économiser de la bande passante.

Il n'est pas toujours nécessaire de fournir des éléments<link>. Par exemple, les navigateurs demandent automatiquement/favicon.ico à la racine d'un site, et Apple demande aussi automatiquement/apple-touch-icon-[size].png,/apple-touch-icon.png, etc. Cependant, fournir des liens explicites vous protège contre les changements de ces conventions.

Charger conditionnellement des ressources avec des requêtes média

Vous pouvez fournir un type ou une requête média dans un attributmedia ;la ressource ne sera alors chargée que si la condition média est vérifiée. Par exemple :

html

<link href="print.css" rel="stylesheet" media="print" /><link href="mobile.css" rel="stylesheet" media="all" /><link href="desktop.css" rel="stylesheet" media="screen and (width >= 600px)" /><link  href="highres.css"  rel="stylesheet"  media="screen and (resolution >= 300dpi)" />

Évènements de chargement de feuille de style

Vous pouvez déterminer quand une feuille de style a été chargée en écoutant l'évènementload ; de même, vous pouvez détecter si une erreur s'est produite lors du traitement d'une feuille de style en écoutant l'évènementerror :

html

<link rel="stylesheet" href="monstyle.css" />

const stylesheet = document.getElementById("ma-feuille-de-style");stylesheet.onload = () => {  // Faire quelque chose d'intéressant : la feuille a été chargée};stylesheet.onerror = () => {  console.log(    "Une erreur est survenue lors du chargement de la feuille de style !",  );};

Note :L'évènementload est déclenché une fois que la feuille de style et tout son contenu importé ont été chargés et analysés, et immédiatement avant que les styles ne commencent à être appliqués au contenu.

Exemples d'utilisation de`preload`

Vous pouvez trouver plusieurs exemples de<link rel="preload"> dansPrécharger des ressources grâce àrel="preload".

Bloquer le rendu jusqu'à ce qu'une ressource soit récupérée

Vous pouvez inclure le jetonrender dans un attributblocking ;le rendu de la page sera bloqué jusqu'à ce que la ressource et ses sous-ressources critiques soient récupérées et appliquées au document. Par exemple :

html

<link blocking="render" rel="stylesheet" href="exemple.css" crossorigin />

Résumé technique

Catégories de contenu	Contenu de métadonnées. Si`itemprop` est présent :contenu de flux etcontenu 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 ducontenu phrasé.
Rôle ARIA implicite	`link` avec l'attribut`href`
Rôles ARIA autorisés	Aucun`role` autorisé.
Interface DOM	`HTMLLinkElement`

Spécifications

Specification
HTML # the-link-element

Compatibilité des navigateurs

Voir aussi

L'en-tête HTTPLink

Help improve MDN

Learn how to contribute

Cette page a été modifiée le⁨9 nov. 2025⁩ par lescontributeurs du MDN.

View this page on GitHub •Report a problem with this content

Movatterモバイル変換

<link> : l'élément de lien vers des ressources externes

Help improve MDN