Philosophie de l'attribut rel
Le monde du Web est construit sur la métaphore de la toile. Chacun des fils seraient la représentation des hyperliens, là où chaque point d'ancrage de la toile serait alors le représentant d'une page web.
Le lien est un composant essentiel de la structure des documents. Il offre la possibilité de naviguer vers une autre ressources, et de mettre en relation des ressources similaires, complémentaires ou concurrentielles. L'attribut rel placé sur les balises <a>, <area> et <link> définit la nature de la relation établie entre deux ressources.
Ce que dit HTML5
La syntaxe est parlante : la valeur de l'attribut rel indique le type de relation, par exemple lorsqu'il est placé sur un lien <a>.
<a href="lien-hypertexte.html" rel="nofollow">Intitulé du lien</a>
Depuis HTML4, certaines valeurs sont devenues obsolètes. HTML5 instaure les microformats, dont dépend une partie des valeurs utilisables par l'attribut rel.
Tout le monde connaît d'ailleurs au moins une relation célèbre présente dans la section <head>, celle qui permet de lier la feuille de style CSS au document HTML. Le navigateur sait ainsi qu'il s'agit des styles applicables au document et interprète les propriétés CSS contenues dans le fichier lié.
<link rel="stylesheet" href="styles.css" type="text/css">
Application de l'attribut rel
Cet attribut est applicable sur les éléments <a>, <link> et <area>, qui évoquent des liens et relations possibles avec d'autres documents. HTML est en perpétuelle évolution : il existe donc un certain nombre de valeurs officiellement adoptées, et un nombre important de propositions qui ne sont pas encore validées.
Valeurs autorisées pour les éléments <a> et <area>
| Valeur | Description |
|---|---|
alternate |
Donne une représentation du contenu alternative au document |
author |
Un lien vers l'auteur du document courant |
bookmark |
Donne le lien permanent pour la section parente la plus proche. |
contact |
Donne un lien vers une information de contact pour le document présent. Supprimée de la spécification du W3C car correspond déjà à une valeur XFN |
external |
Indique que le document de référence n'est pas une partie du site sur lequel le document courant est présent. Pour le WhatWG cette valeur n'est pas pertinente. |
help |
Fournit un lien vers une aide contextuelle. |
license |
Indique que le lien mène vers un document présentant la licence du document courant. |
next |
Indique que le document courant est une sous-partie et que le document référencé est la partie suivante. |
nofollow |
Indique que l'auteur original ou de l'éditeur du document en cours ne cautionne pas le document de référence. |
noreferrer |
Exige que l'agent utilisateur n'envoie pas de Referer dans les en-têtes HTTP si l'utilisateur suit le lien. |
prefetch |
Indique que la ressource cible doit être préventivement mis en cache. |
prev |
Indique que le document courant est une sous-partie et que le document référencé est la partie précédente. |
search |
Donne un lien vers une ressource qui permet de rechercher dans le document courant et ses pages liées. |
sidebar |
Indique que le document de référence, si trouvé, est destiné à être montré dans la barre latérale du navigateur (s'il en a une). Pour le WhatWG cette valeur n'est pas pertinente. |
tag |
Indique que le document de référence traite d'un mot-clef en rapport au document courant. |
Exemple d'utilisation sur les éléments <a> et <area>
Exemple avec quelques liens classiques
Imaginons un article classique de blog avec des infos sur l'auteur, la date, la catégorie, une liste de mots-clefs, etc. Il est possible de baliser l'ensemble de cette manière :
<article>
<header>
<h1>Partie 2 : Article</h1>
<p>Écrit par <a rel="author" href="author/geoffrey">Geoffrey C.</a> le <time pubdate="2012-01-11">11/01/2012</time></p>
</header>
<div>
<h2>Sommaire</h2>
<ul>
<li><a rel="prev" href="/article-part1.html">Partie 1 : Article</a></li>
<li class="current">Partie 2 : Article</li>
<li><a rel="next" href="/article-part3.html">Partie 3 : Article</a></li>
</ul>
<p>Lorem Elsass ipsum ac Hans tristique schnaps hopla knack Oberschaeffolsheim Richard Schirmeck <a href="http://www.robertsau.eu/" rel="external">Chulia Roberstau</a></p>
</div>
<footer>
<p>Mots-clefs :
<a rel="tag" href="/search/tag/relations">relations</a>,
<a rel="tag" href="/search/tag/rel">rel</a>,
<a rel="tag" href="/search/tag/attribut">attribut</a>
</p>
<p>Article publié selon la <a rel="license" href="http://fr.wikipedia.org/wiki/WTF_Public_License">WTF Public License</a> | <a rel="bookmark nofollow" href="/article/lire/1400-attribut-rel-relations.html">Permalien</a>.</p>
</footer>
</article>
À noter qu'il est important que le document de référence ait un lien avec le mot-clef : une recherche sur ce mot, ou une description du mot.
Note : comme la valeur tag fait référence au document courant, il n'est pas recommandé de l'utiliser pour marquer un nuage de mots-clefs faisant référence aux mots populaires de l'ensemble du site.
Valeurs autorisées pour l'élément <link>
| Valeur | Description |
|---|---|
alternate |
Donne une représentation du contenu alternative au document. |
author |
Un lien vers l'auteur du document courant. |
canonical |
Définit le document de référence comme étant le document canonique. |
help |
Fournit un lien vers une aide contextuelle. |
icon |
Importe une icône représentative du document courant. |
license |
Indique que le lien mène vers un document présentant la licence du document courant. |
next |
Indique que le document courant est une sous-partie et que le document référencé est la partie suivante. |
pingback |
Donne l'adresse du serveur de pingback qui traite ceux du document courant. |
prefetch |
Indique que la ressource cible doit être préventivement mis en cache. |
prev |
Indique que le document courant est une sous-partie et que le document référencé est la partie précédente. |
search |
Donne un lien vers une ressource qui permet de recherche dans le document courant et ses pages liées. |
sidebar |
Specifies that the referenced document, if retrieved, is intended to be shown in the browser's sidebar (if it has one). Pour le WhatWG cette valeur n'est pas pertinente. |
stylesheet |
Importe une feuille de style CSS, l'une des relations les plus connues à l'heure actuelle. |
tag |
Indique que le document de référence traite d'un mot-clef en rapport au document courant. |
Exemple avec <link>
Le plus célèbre a déjà été mentionné en début d'article, nous avons également pour définir l'URL canonique du document courant :
<link rel="canonical" href="http://alsacreations.com/article/lire/1400">
Il est également possible de définir un document référant comme ressource ou outil de recherche :
<link rel="search" type="application/opensearchdescription+xml" title="searchTitle" href="/search">
Valeurs liées à XFN
XFN (XHTML Friends NetWork) propose une utilisation de l'attribut rel ciblé sur le tissu social de manière générale (amis, famille, travail). Voici les valeurs proposées par XFN.
| Valeur | Description |
|---|---|
contact |
Une personne avec laquelle vous savez comment entrer en contact. |
acquaintance |
Une personne avec laquelle vous avez brièvement échangé. |
friend |
Une personne avec laquelle vous avez des liens d'amitier. |
met |
Une personne que vous avez déjà renconté. |
co-worker |
Une personne avec laquelle vous travaillez, probablement dans la même entreprise. |
colleague |
Une personne qui travaille dans la même branche que vous, un confrère. |
co-resident |
Une personne avec laquelle vous partagez la même adresse. |
neighbor |
Une personne avec laquelle vous êtes proche géographiquement, un voisin. |
child |
Une personne qui est votre enfant ou que vous considérez comme tel. |
parent |
L'inverse de child. |
sibling |
Une personne qui partage les mêmes parents que vous. |
spouse |
Une personne avec laquelle vous êtes marié. |
kin |
Une personne qui appartient à votre belle famille, ou que vous considérez comme tel. |
muse |
Une personne qui vous apporte inspiration. |
crush |
Une personne pour laquelle vous avez le béguin. |
date |
Une personne que vous fréquentez. |
sweetheart |
Une personne avec laquelle vous êtes intime et quelque peu engagé, parfois de manière exclusive. |
me |
Une autre de vos références personnelles. |
Plus d'informations sur le site officiel en anglais : gmpg.org/xfn
Évolution à venir
Un grand nombre de valeurs sont proposées et sont en cours de discussion. Il en existe une liste probablement non exhaustive : HTML5 Link Type Extensions
Détournement = Danger
Beaucoup d'outils (CMS, JavaScript) utilisent l'attribut rel comme une solution au marquage spécifique d'un élément ou au transport d'une information nécessaire à l'exécution d'un script par exemple. Il s'agit peut-être d'un usage détourné lié à l'ignorance de l'utilité de cet attribut, ou au manque de rigueur de certains développeurs.
Voici 3 exemples de ressources en ligne qui utilisent ce procédé et qui invalideront votre page HTML5 :
- Lightbox 2 par Lokesh Dhakar
- FancyBox par Jānis Skarnelis
- ShadowBox par Michael J. I. Jackson
Si le besoin de transporter une information se fait ressentir, favorisez l'utilisation des attributs data-*.