Attribut HTML : rel

L'attribut rel définit la relation entre une ressource liée et le document actuel. Valable sur <link>, <a>, <area>, et <form>, les valeurs supportées dépendent de l'élément sur lequel se trouve l'attribut.

Le type de relations est donné par la valeur de l'attribut rel, qui, s'il est présent, doit avoir une valeur qui est un ensemble non ordonné de mots-clés uniques séparés par des espaces. À la différence d'un nom de class, qui n'exprime pas de sémantique, l'attribut rel doit exprimer des mots-clés qui sont sémantiquement valides pour les machines et les humains. Les registres actuels des valeurs possibles de l'attribut rel sont le registre de relations de liens de l'IANA, le HTML Living Standard, et la page existing-rel-values librement modifiable dans le wiki microformats, comme suggéré par le Living Standard. Si un attribut rel non présent dans l'une des trois sources ci-dessus est utilisé, certains validateurs HTML (tels que le W3C Markup Validation Service) généreront un avertissement.

Le tableau suivant énumère quelques-uns des principaux mots-clés existants. Chaque mot-clé dans une valeur séparée par un espace doit être unique dans cette valeur.

Valeur pour rel Description <link> <a> et <area> <form>
alternate Représentations alternatives du document actuel. Lien Lien Non autorisé
author Auteur du document ou de l'article en cours. Lien Lien Non autorisé
bookmark Lien permanent pour la section de l'ancêtre le plus proche. Non autorisé Lien Non autorisé
canonical URL préférée pour le document actuel. Lien Non autorisé Non autorisé
dns-prefetch Indique au navigateur d'effectuer de manière préemptive la résolution DNS pour l'origine de la ressource cible. Ressource externe Non autorisé Non autorisé
external Le document référencé ne fait pas partie du même site que le document actuel. Non autorisé Annotation Annotation
help Lien vers l'aide contextuelle. Lien Lien Lien
icon Une icône représentant le document actuel. Ressource externe Non autorisé Non autorisé
license Indique que le contenu principal du document actuel est couvert par la licence de copyright décrite par le document référencé. Lien Lien Lien
manifest Manifeste de l'application web. Lien Non autorisé Non autorisé
modulepreload Indique au navigateur de récupérer le script de manière préemptive et de le stocker dans la carte des modules du document pour une évaluation ultérieure. En option, les dépendances du module peuvent également être récupérées. Ressource externe Non autorisé Non autorisé
next Indique que le document actuel fait partie d'une série et que le document suivant dans la série est le document référencé. Lien Lien Lien
nofollow Indique que l'auteur ou l'éditeur original du document actuel n'approuve pas le document référencé. Non autorisé Annotation Annotation
noopener Crée un contexte de navigation de haut niveau qui n'est pas un contexte de navigation auxiliaire si l'hyperlien créerait l'un ou l'autre, pour commencer (c'est-à-dire qu'il a une valeur d'attribut target appropriée). Non autorisé Annotation Annotation
noreferrer Aucun en-tête Referer ne sera inclus. En outre, a le même effet que noopener. Non autorisé Annotation Annotation
opener Crée un contexte de navigation auxiliaire si l'hyperlien créerait autrement un contexte de navigation de premier niveau qui n'est pas un contexte de navigation auxiliaire (c'est-à-dire qui a « _blank » comme valeur d'attribut target). Non autorisé Annotation Annotation
pingback Donne l'adresse du serveur de retour d'appel qui gère les retours d'appel pour le document actuel. Ressource externe Non autorisé Non autorisé
preconnect Spécifie que l'agent utilisateur doit se connecter de manière préemptive à l'origine de la ressource cible. Ressource externe Non autorisé Non autorisé
prefetch Indique que l'agent utilisateur doit récupérer et mettre en cache de manière préemptive la ressource cible, car elle est susceptible d'être requise pour une navigation ultérieure. Ressource externe Non autorisé Non autorisé
preload Spécifie que l'agent utilisateur doit récupérer et mettre en cache de manière préemptive la ressource cible pour la navigation actuelle en fonction de la destination potentielle donnée par l'attribut as (et la priorité associée à la destination correspondante). Ressource externe Non autorisé Non autorisé
prerender Spécifie que l'agent utilisateur doit récupérer de manière préemptive la ressource cible et la traiter de manière à fournir une réponse plus rapide à l'avenir. Ressource externe Non autorisé Non autorisé
prev Indique que le document actuel fait partie d'une série et que le document précédent dans la série est le document référencé. Lien Lien Lien
search Donne un lien vers une ressource qui peut être utilisée pour effectuer une recherche dans le document actuel et ses pages connexes. Lien Lien Lien
stylesheet Importe une feuille de style. Ressource externe Non autorisé Non autorisé
tag Donne une balise (identifiée par l'adresse donnée) qui s'applique au document actuel. Non autorisé Lien Non autorisé

L'attribut rel concerne les éléments <link>, <a>, <area> et <form>, mais certaines valeurs ne concernent qu'un sous-ensemble de ces éléments. Comme toutes les valeurs d'attributs de mots-clés HTML, ces valeurs sont insensibles à la casse.

L'attribut rel n'a pas de valeur par défaut. Si l'attribut est omis ou si aucune des valeurs de l'attribut n'est prise en charge, alors le document n'a pas de relation particulière avec la ressource de destination autre que l'existence d'un lien hypertexte entre les deux. Dans ce cas, sur <link> et <form>, si l'attribut rel est absent, n'a pas de mots-clés, ou s'il ne s'agit pas d'un ou plusieurs des mots-clés séparés par des espaces ci-dessus, alors l'élément ne crée aucun lien. <a> et <area> créeront quand même des liens, mais sans relation définie.

Valeurs

S'il existe plusieurs <link rel="icon">, le navigateur utilise leur attribut media, type et sizes pour sélectionner l'icône la plus appropriée. Si plusieurs icônes sont également appropriées, la dernière est utilisée. Si l'icône la plus appropriée s'avère ultérieurement inappropriée, par exemple parce qu'elle utilise un format non pris en charge, le navigateur passe à l'icône suivante la plus appropriée, et ainsi de suite.

Note : L'iOS d'Apple n'utilise pas ce type de lien, ni l'attribut sizes, comme le font d'autres navigateurs mobiles, pour sélectionner une icône de page Web pour Web Clip ou un espace réservé au démarrage. Au lieu de cela, il utilise les attributs non standard apple-touch-icon et apple-touch-startup-image respectivement.

Note : Le type de lien shortcut est souvent vu avant icon, mais ce type de lien est non conforme, ignoré et les auteurs web ne doivent plus l'utiliser.

alternate

Indique une représentation alternative du document actuel. Valable pour <link>, <a>, et <area>, la signification dépend des valeurs des autres attributs.

  • Avec le mot clé stylesheet sur un <link>, il crée une feuille de style alternative.

    html
    <!-- une feuille de style persistante -->
<link rel="stylesheet" href="default.css" />
<!-- feuilles de style alternativement -->
<link
  rel="alternate stylesheet"
  href="highcontrast.css"
  title="Contraste élevé" />

  • Avec un attribut hreflang qui diffère de la langue du document, cela indique une traduction.

  • Avec l'attribut type, il indique que le document référencé est le même contenu dans un format différent. Par exemple, avec type="application/rss+xml", il crée un lien hypertexte référençant un flux de syndication.

    html
    <link
  rel="alternate"
  type="application/atom+xml"
  href="posts.xml"
  title="Blog" />

  • Les attributs hreflang et type spécifient des liens vers des versions du document dans un format et une langue alternatifs, destinés à d'autres médias :

    html
    <link rel="alternate" href="/fr/html/print" hreflang="fr" type="text/html" media="print" title="HTML français (pour l'impression)">
<link rel="alternate" href="/fr/pdf" hreflang="fr" type=application/pdf title="PDF Français">

Note : L'attribut obsolète rev="made" est traité comme rel="alternate".

author

Indique l'auteur du document ou de l'article en cours. Pertinent pour les éléments <link>, <a> et <area>, le mot-clé author crée un lien hypertexte. Avec <a> et <area>, il indique que le document lié (ou mailto:) fournit des informations sur l'auteur de l'ancêtre le plus proche d'un élément <article> s'il en existe un, sinon le document entier. Pour <link>, il représente l'auteur du document entier.

bookmark

Pertinent comme valeur de l'attribut rel pour les éléments <a> et <area>, le signet fournit un permalien pour la section ancêtre, qui est l'ancêtre le plus proche d'un élément <article> ou <section>, s'il y en a au moins un, sinon, le parent le plus proche de l'en-tête ou l'ancêtre descendant, jusqu'au suivant.

canonical

Valable pour <link>, elle définit l'URL préférée du document actuel, ce qui est utile pour les moteurs de recherche.

dns-prefetch

Pertinent pour l'élément <link> à la fois dans les éléments <body> et <head>, il indique au navigateur d'effectuer de manière préemptive la résolution DNS pour l'origine de la ressource cible. Utile pour les ressources dont l'utilisateur aura probablement besoin, elle permet de réduire la latence et donc d'améliorer les performances lorsque l'utilisateur accède effectivement aux ressources car le navigateur a effectué de manière préemptive la résolution DNS pour l'origine de la ressource spécifiée. Voir dns-prefetch décrit dans les conseils.

external

S'appliquant à <form>, <a> et <area>, elle indique que le document référencé ne fait pas partie du site actuel. Il peut être utilisé avec des sélecteurs d'attributs pour donner un style aux liens externes d'une manière qui indique à l'utilisateur qu'il va quitter le site actuel.

help

Concerne les éléments <form>, <link>, <a> et <area>, le mot clé help indique que le contenu lié fournit une aide contextuelle, fournissant des informations pour le parent de l'élément définissant l'hyperlien, et ses enfants. Lorsqu'il est utilisé dans <link>, l'aide concerne l'ensemble du document. Lorsqu'elle est incluse avec <a> et <area> et qu'elle est prise en charge, le cursor par défaut sera help au lieu de pointer.

icon

Valable avec <link>, la ressource liée représente l'icône, ressource de représentation de la page dans l'interface utilisateur, pour le document courant.

L'utilisation la plus courante de la valeur icon est le favicon :

html
<link rel="icon" href="favicon.ico" />

S'il existe plusieurs <link rel="icon">, le navigateur utilise leurs attributs media, type, et sizes pour sélectionner l'icône la plus appropriée. Si plusieurs icônes sont également appropriées, la dernière est utilisée. Si l'icône la plus appropriée s'avère ultérieurement inappropriée, par exemple parce qu'elle utilise un format non pris en charge, le navigateur passe à l'icône suivante la plus appropriée, et ainsi de suite.

Note : Avant Firefox 83, l'attribut crossorigin n'était pas pris en charge pour rel="icon" ; il existe également un problème pour Chrome.

L'iOS d'Apple n'utilise pas ce type de lien, ni l'attribut sizes, comme le font d'autres navigateurs mobiles, pour sélectionner une icône de page Web pour Web Clip ou un espace réservé au démarrage. Au lieu de cela, il utilise respectivement le type non standard apple-touch-icon et apple-touch-startup-image.

Le type de lien shortcut est souvent vu avant icon, mais ce type de lien est non conforme, ignoré et les auteurs web ne doivent plus l'utiliser.

license

Valable sur les éléments <a>, <area>, <form> et <link>, la valeur license indique que l'hyperlien mène à un document décrivant les informations relatives à la licence ; que le contenu principal du document actuel est couvert par la licence de droit d'auteur décrite par le document référencé. Si elle ne se trouve pas à l'intérieur de l'élément <head>, la norme ne fait pas de distinction entre un hyperlien s'appliquant à une partie spécifique du document ou au document dans son ensemble. Seules les données de la page peuvent l'indiquer.

html
<link rel="license" href="#license" />

Note : Bien que reconnu, le synonyme copyright est incorrect et doit être évité.

manifest

Manifeste de l'application Web. Nécessite l'utilisation du protocole CORS pour le « fetching cross-origin ».

modulepreload

Utile pour améliorer les performances, et pertinent pour l'élément <link> n'importe où dans le document, la définition de rel="modulepreload" indique au navigateur de récupérer de manière préemptive le script (et les dépendances) et de le stocker dans la carte des modules du document pour une évaluation ultérieure. Les liens modulepreload peuvent garantir que la récupération du réseau se fait avec le module prêt (mais non évalué) dans la carte des modules avant qu'il ne soit nécessairement nécessaire. Voir aussi Types de liens : modulepreload.

next

Pertinent pour les éléments <form>, <link>, <a> et <area>, les valeurs next indiquent que le document actuel fait partie d'une série, et que le document suivant dans la série est le document référencé. Lorsqu'elles sont incluses dans un <link>, les navigateurs peuvent supposer que le document sera récupéré ensuite, et le traiter comme une indication de ressource.

nofollow

Pertinent pour les éléments <form>, <a> et <area>, le mot clé nofollow indique aux robots des moteurs de recherche d'ignorer la relation de lien. La relation nofollow peut indiquer que le propriétaire du document actuel ne cautionne pas le document référencé. Elle est souvent incluse par les optimiseurs de moteurs de recherche qui prétendent que leurs fermes de liens ne sont pas des pages de spam.

noopener

Cela concerne <form>, <a> et <area>, elle crée un contexte de navigation de haut niveau qui n'est pas un contexte de navigation auxiliaire si l'hyperlien créait l'un ou l'autre pour commencer (c.-à-d. a une valeur appropriée de l'attribut target). En d'autres termes, il fait en sorte que le lien se comporte comme si window.opener était nul et que target="_parent" était défini.

C'est le contraire de opener.

noreferrer

Pertinent pour <form>, <a> et <area>, l'inclusion de cette valeur rend le référent inconnu (aucun en-tête Referer ne sera inclus), et crée un contexte de navigation de haut niveau comme si noopener était également défini.

opener

Crée un contexte de navigation auxiliaire si l'hyperlien créerait autrement un contexte de navigation de haut niveau qui n'est pas un contexte de navigation auxiliaire (c.-à-d. a « _blank » comme valeur d'attribut target). Effectivement, c'est le contraire de noopener.

pingback

Donne l'adresse du serveur de retour d'appel qui gère les retours d'appel pour le document actuel.

preconnect

Spécifie que l'agent utilisateur doit se connecter de manière préemptive à l'origine de la ressource cible.

prefetch

Indique que l'agent utilisateur doit récupérer et mettre en cache de manière préemptive la ressource cible, car elle est susceptible d'être requise pour une navigation ultérieure.

preload

Spécifie que l'agent utilisateur doit récupérer et mettre en cache de manière préemptive la ressource cible pour la navigation actuelle en fonction de la destination potentielle donnée par l'attribut as (et la priorité associée à la destination correspondante).

prerender

Spécifie que l'agent utilisateur doit récupérer de manière préemptive la ressource cible et la traiter de manière à fournir une réponse plus rapide à l'avenir.

prev

Similaire au mot-clé next, pertinent pour les éléments <form>, <link>, <a> et <area>, les valeurs prev indiquent que le document actuel fait partie d'une série, et que le lien renvoie à un document précédent de la série est le document référencé.

Note : Le synonyme previous est incorrect et ne doit pas être utilisé.

Concerne les éléments <form>, <link>, <a> et < area>, les mots-clés search indiquent que l'hyperlien fait référence à un document dont l'interface est spécialement conçue pour effectuer des recherches dans le document actuel, le site et les ressources connexes, en fournissant un lien vers une ressource qui peut être utilisée pour effectuer une recherche.

Si l'attribut type est défini à application/opensearchdescription+xml, la ressource est un prolongateur OpenSearch qui peut être facilement ajouté à l'interface de certains navigateurs comme Firefox ou Internet Explorer.

stylesheet

Valable pour l'élément <link>, il importe une ressource externe à utiliser comme feuille de style. L'attribut type n'est pas nécessaire, car il s'agit d'une feuille de style text/css, puisque c'est la valeur par défaut. S'il ne s'agit pas d'une feuille de style de type text/css, il est préférable de déclarer le type.

Bien que cet attribut définisse le lien comme étant une feuille de style, l'interaction avec d'autres attributs et d'autres termes clés dans la valeur rel ont un impact sur le téléchargement et/ou l'utilisation de la feuille de style.

Lorsqu'il est utilisé avec le mot-clé alternate, il définit une feuille de style alternative. Dans ce cas, incluez un title non vide.

La feuille de style externe ne sera pas utilisée ni même téléchargée si le média ne correspond pas à la valeur de l'attribut media.

Nécessite l'utilisation du protocole CORS pour la récupération inter-origine.

tag

Valable pour les éléments <a> et <area>, il donne une balise (identifiée par l'adresse donnée) qui s'applique au document actuel. La valeur de la balise indique que le lien renvoie à un document, décrivant une balise s'appliquant au document sur lequel il se trouve. Ce type de lien n'est pas destiné aux balises, dans un nuage de balises, car elles s'appliquent à un groupe de pages, alors que la valeur tag de l'attribut rel concerne un seul document.

Valeurs non standard

apple-touch-icon-precomposed

Exemple d'utilisation

html
<!-- iPad de troisième génération avec écran Retina haute résolution : -->
<link
  rel="apple-touch-icon-precomposed"
  sizes="144x144"
  href="/static/img/favicon144.e7e21ca263ca.png" />
<!-- iPhone avec écran Retina haute résolution : -->
<link
  rel="apple-touch-icon-precomposed"
  sizes="114x114"
  href="/static/img/favicon114.d526f38b09c5.png" />
<!-- première et deuxième génération d'iPad: -->
<link
  rel="apple-touch-icon-precomposed"
  sizes="72x72"
  href="/static/img/favicon72.cc65d1d762a0.png" />
<!-- Appareils iPhone non Retina, iPod Touch et Android 2.1+ : -->
<link
  rel="apple-touch-icon-precomposed"
  href="/static/img/favicon57.de33179910ae.png" />
<!-- favicône de base -->
<link rel="shortcut icon" href="/static/img/favicon32.7f3da72dcea1.png" />

Spécifications

Specification
HTML Standard
# linkTypes
HTML Standard
# attr-hyperlink-rel
HTML Standard
# attr-form-rel

Compatibilité des navigateurs

html.elements.link.rel

BCD tables only load in the browser

html.elements.a.rel

BCD tables only load in the browser

html.elements.area.rel

BCD tables only load in the browser

html.elements.form.rel

BCD tables only load in the browser

Voir aussi