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 (en-US) 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é.

`search`

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 (en-US) 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 |

Compatibilité des navigateurs
-----------------------------

### html.elements.link.rel

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### html.elements.a.rel

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### html.elements.area.rel

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* La propriété `HTMLLinkElement.relList` (en-US)
* La propriété `HTMLAnchorElement.relList` (en-US)
* La propriété `HTMLAreaElement.relList` (en-US)