Niveau Niveau confirmé

HTML5 : attribut rel et relations

Articlehtml

Publié par le , mis à jour le (162822 lectures)

html5 relations rel attribut

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.


Une toile d'araignée. Spider Art par CaptPiper

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 :

Si le besoin de transporter une information se fait ressentir, favorisez l'utilisation des attributs data-*.

Ressources

Quiz

Testez vos connaissances avec un Quiz HTML5

Commentaires

Arf zut ! j'utilise justement Shadowbox qui utilise l'attribut rel pour regrouper des images au sein d'une même galerie (ex: rel="shadowbox[divers]" seront les images appartenant à la galerie 'divers'). Est-ce que cet outil sera vraiment à éviter ? Je vais peut-être suggèrer à l'auteur l'utilisation de l'attribut data-* ...

@maximesimeon : merci :)
C'est corrigé.

@Pooley : aussi bizarre que ça puisse paraître, le rel-shadowbox a été proposé, a en croire le tableau qui suit http://microformats.org/wiki/existing-rel-val...
L'outil n'est pas à éviter pour autant, la validation d'un document n'est pas une fin en soi, il faut parfois trouver un compromis.
La fin de mon article était surtout là en guise d'avertissement à prendre dans le sens "rel possède une définition".

Je cite : "Indique que le document de référence traite d'un mot-clef en rapport au document courant."

C'est quoi le document de référence ? Et pour être certain : c'est quoi le document courant ?

@Alphonse : Le document courant est le document en cours de consultation. Le document de référence est le document ciblé par l'attribut href.

@Geoffrey C. : Yep je viens aussi de voir ça :) j'ai eu cette réponse de la part d'un des membres les plus actifs du forum shadowbox :
"I am not the author but I got the info to share.
Shadowbox uses rel="shadowbox" that has been proposed for HTML5 approval. See link.
Shadowbox v3.0.3 was not made specifically for HTML5 and therefore does not use data-* attribute tags in it's API. At the time of this writing, the next version of Shadowbox that is currently being developed will require HTML5 DOCTYPE declaration and supports the use of the mentioned attribute tag.

You can still have your cake and eat it too with Shadowbox v3.0.3 and HTML5 and Galleries. Do not use the Shadowbox rel Attribute and instead use Shadowbox.open(); with a Gallery array."
Bon Ok, on pinaille là lol.

Merci pour cet article précis.

Je trouve qu'il est encore relativement difficile de trouver des articles qui ne racontent pas n'importe quoi sur le HTML5...

Merci pour cet article intéressant. Juste une petite remarque : FancyBox 2 a été mis à jour. Il n'utilise plus l'attribut rel mais data-fancybox-group.

En ce qui concerne shadowbox, il est possible de contourner le problème de validation si il n' y a qu'une seule galerie dans la page en utilisant Shadowbox.setup manuellement qui permet d'avoir une class sur le lien plutôt que l'attribut "rel" (Solution pour laquelle j'ai opté).

Je n'ai pas testé mais il est apparemment aussi possible de modifier les occurrences "rel" de shadowbox.js par "class". Il faut en revanche faire attention en cas de mise à jour.

@zanoni : Merci pour cette information, je n'ai pas pris le temps de re-tester, mais les démo du site mentionnent toujours l'utilisation de l'attribut rel...

@NeOxY : le développeur de ShadowBox semble assez sensible au respect des normes, je me doute donc qu'un contournement est possible, cependant il n'est pas accessible très facilement à tous. Voyons comment les choses évoluent, peut-être qu'une mise à jour est prévue ;)