<link>

Résumé

L'élément HTML lien (<link>) spécifie les relations entre le document courant et d'autres documents. Parmi les utilisations de cet élément, on peut citer la définition de relations pour la navigation et le lien du document avec une feuille de style.

• Catégories de contenu Contenu de méta-donnée. Si l'attribut itemprop est présent : contenu de flux, contenu phrasé.
• Contenu autorisé Aucun, c'est un élément vide.
• Omission de balises Aucune, tant le tag d'ouverture que de fermeture est obligatoire
• Élément parents autorisés Tout élément acceptant des éléments de méta-données. Si l'attribut itemprop est présent : tout élément acceptant du contenu phrasé.
• Interface DOM HTMLLinkElement

Attributs

Cet élément inclut les attributs globaux.

charset

Cet attribut définit l'encodage de la ressource liée. La valeur de cet attribut est une liste de jeux de caractères séparés par des espaces ou des virgules. Les jeux de caractères à utiliser sont définis par le RFC 2045. La valeur par défaut est ISO-8859-1.

Note d'utilisation : Cet attribut est obsolète en HTML5 et ne doit pas être utilisé ! Pour réaliser le même effet, il faut utiliser un en-tête HTTP Content-Type: sur la ressource liée.

crossorigin HTML5

Cet attribut, pouvant prendre différentes valeurs, indique si l'acquisition de l'image doit être effectué en utilisant le CORS ou non. Les images avec CORS activé peuvent être réutilisées dans un élément <canvas> sans le corrompre. Les valeurs autorisées sont :

anonymous

Une requête d'origines multiples (cross-origin) est effectuée (c'est à dire avec l'en-tête HTTP Origin). Toutefois aucune information d'authentification n'est envoyée (pas de cookie, pas de certificat X.509, pas d'authentification HTTP simple). Si le serveur ne fournit pas d'informations d'authentification au site d'origine (en ne réglant pas l'en-tête HTTP avec la valeur Access-Control-Allow-Origin:), l'image sera corrompue et son utilisation restreinte.

use-credentials

Une requête d'origines multiples (avec l'en-tête HTTP Origin:) est effectué et des informations d'authentification sont envoyées (un cookie, un certificat et une authentification HTTP simple sont effectuées). Si le serveur ne fournit pas d'informations d'authentification au site d'origine via l'en-tête HTTP Access-Control-Allow-Credentials:, l'image sera corrompue et son utilisation restreinte.

Quand cet attribut n'est pas présent, la requête de la ressource est effectuée sans requête CORS (sans envoyer d'en-tête HTTP Origin:), afin d'éviter un usage non-corrompu dans des éléments <canvas>. Si cet attribut est invalide, il est pris en compte comme si le mot-clé anonymous avait été utilisé. Voir la page attributs de réglage du CORS pour plus d'informations.

disabled

Cet attribut est utilisé pour désactiver la relation créée par un lien. En associant cet attribut et l'utilisation de scripts, cet attribut pouvait être activé/desactivé pour utiliser plusieurs relations avec des feuilles de styles différentes.

Note : Bien qu'il n'y ait pas d'attribut disabled dans le standard HTML, il y a un attribut disabled pour l'objet DOM HTMLLinkElement.

L'utilisation de disabled comme attribut HTML n'est pas standard et il est seulement utilisé comme tel par les navigateurs de Microsoft. Il ne faut pas l'utiliser. Pour réaliser le même effet, vous pouvez une des techniques suivantes :

• Si l'attribut disabled a été ajouté directement sur l'élément de la page, ne pas inclure d'élément <link>
• Régler la propriété disabled de l'objet DOM via l'utilisation script.

href

Cet attribut définit l'URL de la ressource liée. Une URL peut être absolue ou relative.

hreflang

Cet attribut indique la langue de la ressource liée. Ce n'est qu'une simple indication. Les valeurs autorisées sont définies par : BCP47 pour HTML5 et par RFC1766 pour HTML 4. Cet attribut ne doit être utilisé seulement si l'attribut href est présent.

media

Cet attribut définit le media qui s'applique à la ressource liée. La valeur de cet attribut doit être une requête media. Cet attribut est surtout utile pour lier différentes feuilles de styles externes au document. L'agent utilisateur choisit alors la feuille la plus adaptée à l'appareil utilisé.

Notes d'utilisation :

• En HTML 4, la valeur de cet attribut ne peut être qu'une liste de littéraux (séparés par des espaces) décrivant les médias : les types et groupes de media, définissant les valeurs autorisées pour cet attribut comme print, screen, aural, braille. HTML5 a étendu ce fonctionnement à l'ensemble des requêtes media, un sur-ensemble des valeurs autorisées en HTML 4
• Les navigateurs ne supportant pas les  requêtes media CSS3 ne reconnaîtront pas obligatoirement le lien adéquat. Il ne faut pas oublier de fournir des liens de remplacement utilisant l'ensemble de requêtes plus restreint de HTML 4.

methods

La valeur de cet attribut fournit une information quant aux fonctions qui peuvent être utilisées sur l'objet. Les valeurs sont généralement fournies par le protocole HTTP lorsqu'il est utilisé. Il peut toutefois être utile d'inclure des informations supplémentaires en amont du lien. Le navigateur pouvant par exemple choisir un rendu différent pour le lien selon les méthodes spécifiées (liens de recherche ayant une icône particulière, liens pointants vers un site extérieur...). Cet attribut n'est pas bien compris, ni même supporté correctement par le seul navigateur l'utilisant : Internet Explorer 4. Voir les méthodes de propriété (MSDN).

rel

Cet attribut nomme une relation entre le document lié et le document courant. Cet attribut doit être une liste de types de lien séparées par des espaces. L'utilisation la plus fréquente de cet attribut est la spécification d'un lien vers une feuille de style externe, l'attribut rel vaut alors stylesheet, et l'attribut href est l'URL pointant vers la feuille de style externe. WebTV supporte aussi la valeur next pour cette attribut rel afin de pré-charger la page suivante dans une suite de documents.

rev

La valeur de cet attribut montre la relation entre le document courant et le document lié telle que définie par l'attribut href. Cet attribut définit la relation réciproque (inverse) de celle définie par la valeur de l'attribut rel. Les valeurs possibles pour cet attribut sont semblables à celles de rel.

Note d'utilisation : Cet attribut est obsolète en HTML5 et ne doit pas être utilisé. Pour réaliser le même effet, il faut utiliser l'attribut rel avec la valeur inverse. Ainsi made devrait être remplacé par author. Il est à noter que cet attribut ne signifie pas revision (terme anglais pour version) et ne doit donc pas être utilisé pour représenter un numéro de version (ce qui est malheureusement le cas pour de nombreux sites).

sizes HTML5

Cet attribut définit les tailles des icônes et des media graphiques contenus dans la ressource. Cet attribut doit être présent seulement si l'attribut rel contient la valeur icon. Cet attribut peut prendre les valeurs suivantes :

• any, l'icône, si elle est dans un format vectoriel (comme image/svg), pourra être redimensionnée à n'importe quelle échelle.
• une liste de tailles, séparées par des blancs, dont le format de chacune des tailles est <largeur en pixels>x<hauteur en pixels> ou <largeur en pixels>X<hauteur en pixels>. Chacune de ces tailles doit être contenue dans la ressource.

Note d'utilisation :

• La plupart des formats d'icônes ne peuvent stocker qu'une seule icône, la liste sizes ne contient donc qu'un seul élément la plupart du temps. Parmi les principaux navigateurs, seul le format ICNS d'Apple permet de stocker plusieurs icônes, ce format n'est supporté que par WebKit.
• iOS (Apple) ne supporte pas cet attribut. Les iPhone et iPad utilisent donc des valeurs spéciales, non-standards pour définir l'icône à utiliser: apple-touch-icon et apple-touch-startup-icon.

target

Cet attribut définit le nom de la frame ou de la fenêtre qui contient la ressource liée ou qui affichera le rendu de n'importe quelle ressource liée.

type

Cet attribut est utilisé pour définir le type du contenu lié. La valeur de cet attribut doit être un type MIME comme text/html, text/css. La plupart du temps, cet attribut est utilisé pour définir le type d'une feuille de style liée grâce à la valeur text/css (CSS signifiant Cascading Style Sheet ou feuille de style en cascade).

Exemples

Lier une feuille de style

Pour inclure une feuille de style au sein d'une page, il faut utiliser la syntaxe suivante :

<link href="style.css" rel="stylesheet" type="text/css" media="all">

Fournir des feuilles de style alternatives

Il est également possible de définir des feuilles de style alternatives.

L'utilisateur peut alors choisir une mise en forme différente en utilisant le menu Affichage puis l'option « Style de la page ». Cela permet aux utilisateurs de pouvoir lire différentes mises en forme de la même page/

<link href="default.css" rel="stylesheet" type="text/css" title="Style par défaut">
<link href="joli.css" rel="alternate stylesheet" type="text/css" title="Joli">
<link href="basique.css" rel="alternate stylesheet" type="text/css" title="Basique">

Événements de chargement des feuilles de style

Il est possible de déterminer le moment où une feuille de style a été chargée en utilisant un événement load se déclenchant sur celle-ci. De la même manière, il est possible de détecter des erreurs en surveillant un événement error.

<script>
function sheetLoaded() {
  // Faire quelque chose une fois que la feuille est chargée
}

function sheetError() {
  alert("Une erreur s'est produite lors du chargement de la feuille !");
}
</script>

<link rel="stylesheet" href="mystylesheet.css" type="text/css" onload="sheetLoaded()" onerror="sheetError()">

Notes

• Une balise <link> ne peut être utilisée qu'au sein d'un élément head. Il est cependant possible d'utiliser plusieurs éléments link
• HTML 3.2 définit uniquement les attribut href, rel, rev, et title pour cet élément.
• HTML 2 définit les attributs href, methods, rel, rev, title, et urn pour cet élément. Les attributs methods et urn ont par la suite été retirés des spécifications.
• Les spécifications HTML et XHTML définissent des objets pour manipuler les événements de l'élément <link>. Cependant ces définitions ne sont pas claires à ce sujet.
• Sous XHTML 1.0, les éléments vides comme l'élément <link> nécessitaient une barre oblique avant le chevron fermant : <link />.

Spécifications

Compatibilité des navigateurs

Voir également

• La tableau de compatibilité de Ryan Grove's sur les événements des nœuds <script> et <link>.