I. Pourquoi RDFa ?▲
Prenons un exemple de page assez simple, en XHTML.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Titre</title>
</head>
<body>
<div id="entete">
<ul id="menu">
<li><a href="/">Page d'accueil</a></li>
<li><a href="/contact/">Contact</a></li>
</ul>
</div>
<h1>Titre de l'article</h1>
<h2>Un article de quelqu'un</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non sem in erat vehicula ultrices. Donec nibh felis, hendrerit non faucibus vel,
iaculis ullamcorper sapien. Donec eget magna et massa vulputate aliquam non a nisl. Cras eleifend cursus cursus. Pellentesque habitant morbi
tristique senectus et netus et malesuada fames ac turpis egestas. Sed et leo id tortor dignissim condimentum. Proin nisl quam, feugiat id
fermentum sed, cursus id diam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut porta dapibus diam,
semper tincidunt sem lobortis non. Vestibulum consequat, diam nec dignissim placerat, nibh libero consequat lorem, ac luctus dolor odio nec felis.
Mauris id eros felis. Sed porttitor, massa at iaculis venenatis, quam quam tristique ante, ut porttitor eros enim in elit. Donec porta nisl lectus.
Nunc eleifend auctor enim quis vestibulum. Cras tincidunt luctus risus eget vulputate.
</p>
<p>
Le contenu de cette page est sous licence, <a href="/licence/">plus de détails.</a>
</p>
</body>
</html>Un humain voit très bien ce qui est un titre, qui est l'auteur, ce qu'est le menu du site, quelle est la licence de cette page.
Premier exemple : une personne visuellement déficiente. Elle voudra sûrement se passer du menu et arriver directement au contenu de la page à l'aide du lecteur de texte. Comment l'indiquer au navigateur ?
Deuxième exemple : un moteur de recherche propose une fonctionnalité de recherche de documents en fonction de leur licence. Comment donner explicitement cette information de licence ?
Finalement, comparons ce que voit le navigateur et ce que voit l'humain. Le navigateur voit une liste, un titre, un titre de niveau inférieur, un long paragraphe, un paragraphe plus court. Cela n'a aucun sens pour lui. L'humain, lui, voit qu'il y a un menu, qui va l'aider à naviguer sur le site ; qu'il visionne la page qui porte un certain titre ; que cette page a été rédigée par quelqu'un dont le nom est écrit ; que cette page est sous une certaine licence. Il faudrait que le navigateur ait aussi accès à ces informations.
Pour donner ces informations complémentaires, il faut utiliser une certaine manière d'annoter le contenu. On utilisera ici RDFa.
RDFa est un sigle signifiant RDF in HTML attributes, RDF signifiant Resource Description Framework. Explicitement, on sait que RDFa mettra son contenu dans des attributs HTML de la page.
Actuellement, RDFa n'est défini que pour le XHTML, pas pour le HTML. Cependant, la majorité des parseurs RDFa pourront reconnaître les attributs dans des pages HTML. Il n'empêche que l'ajout d'attributs dans des pages HTML ne produira pas une page conforme aux standards HTML. RDFa est intégré dans le standard XHTML 2. (1)
Plusieurs vocabulaires RDFa sont disponibles ; chaque vocabulaire supplémentaire permet de définir de nouveaux attributs pour marquer les données de la page. Par exemple, on peut aussi utiliser RDFa pour le réseautage social, à l'aide du vocabulaire FOAF (Friend Of A Friend).
FOAF n'est pas le seul format utilisable dans ce cas. D'autres solutions comme vCard (l'ontologie est aussi disponible), hCard ou W3C PIM sont aussi disponibles.
Une ontologie est, pour les sciences de l'information, un système de représentation des connaissances. En effet, on a déjà vu que, bien que l'humain puisse se représenter, sans besoin d'outil externe, à peu près tout savoir, la machine doit se limiter aux savoirs qu'elle peut représenter. Une ontologie est cette manière de représenter le savoir (généralement, un certain type de savoir : la licence ou l'auteur d'un article, par exemple).
II. Comment ajouter des tags RDFa à une page Web ?▲
C'est très simple. Il suffit d'ajouter des attributs aux balises. Le tout étant de savoir quels attributs ajouter et à quelle sémantique ils sont associés.
II-A. Indiquer une licence▲
Avant, nous avions ce paragraphe pour indiquer la licence :
<p>
Le contenu de cette page est sous licence, <a href="/licence/">plus de détails.</a>
</p>On peut ajouter une sémantique bien précise à ce lien, pour qu'il définisse aux yeux de la machine une licence. Avant d'ajouter quoi que ce soit, pour toute machine, ce lien peut pointer vers n'importe quoi : une page d'accueil, un blog, etc. On peut utiliser l'attribut rel dans ce cas :
<p>
Le contenu de cette page est sous licence, <a href="/licence/" rel="license">plus de détails.</a>
</p>Cette simple modification est suffisante pour que tout parseur RDFa comprenne la licence du document.
Le W3C propose, lui aussi, une ontologie pour les documents, comprenant entre autres les licences : W3C PIM ; orientée licence, l'ontologie Creative Commons Rights Expression Language.
II-B. Indiquer auteur et titre▲
On utilise dans ce cas l'attribut property des balises qui définissent ces informations.
<div xmlns:dc="http://purl.org/dc/elements/1.1/">
<h1 property="dc:title">Titre de l'article</h1>
<h2 property="dc:creator">Un article de quelqu'un</h2>
</div>De là, des questions surgissent tout naturellement. Pourquoi un <div> ? Pourquoi un attribut barbare pour ce <div> ? Quelle est donc cette URI dans cet attribut barbare ? Pourquoi ne pas utiliser simplement les attributs title et creator au lieu de ces immondes dc:title et dc:creator ?
Tout d'abord, il faut choisir un répertoire quelque part sur le Web qui définit ces mots-clés. En effet, title, dans ce contexte, se rapporte tout naturellement au titre de l'article... parce que nous, humains, savons que nous déchiffrons un article. La machine, elle, n'en sait rien. Ce pourrait être l'intitulé d'une offre d'emploi, par exemple. Aussi, si on laissait les webmasters utiliser des mots-clés très courts, l'espace des propriétés deviendrait relativement désordonné, très encombré.
Pour éviter ce capharnaüm, le standard RDFa ne reconnaît pas ces formes aussi abrégées. On doit donc spécifier un répertoire sur le Web pour définir la sémantique de ces attributs, une URI d'où importer ces mots-clés. Heureusement pour nous, le Dublin Core Metadata Initiative a déjà défini ces sémantiques (d'où le préfixe dc:). Ainsi, il suffit d'inclure les définitions du vocabulaire, puis d'utiliser ce vocabulaire, d'où le <div> et les préfixes.
En RDFa, toutes les propriétés sont des URI. En écrivant property="dc:title", on fait référence à l'URI http://purl.org/dc/elements/1.1/title, URI qui est connectée à une chaîne de caractères, ici Titre de l'article.
II-C. Autres informations▲
On peut évidemment utiliser d'autres attributs sémantiques dans la même ontologie, en voici quelques-uns :
- dc:contributor : indique un contributeur ;
- dc:date : indique une date ;
- dc:description : indique un texte descriptif (chapeau d'un article, par exemple).
III. Plusieurs séries de tags par page▲
L'exemple précédent traitait d'un seul et unique article par page. Cependant, peu de sites ne disposent que de pages avec un seul et unique article. Prenons une page quelconque sur le forum : Adresse réseau mappée. On voit bien qu'il y a plusieurs messages, plusieurs auteurs, plusieurs titres. Comment décrire cela à l'aide de RDFa ?
Il suffit de déterminer un <div> par partie de la page. On y ajoutera un attribut about, une partie d'URI qui permettra de localiser cette partie du contenu dans la page. On pourrait avoir ceci, par exemple :
<div about="WOLO Laurent/posts/applications/developpement-reseau">
<h3 property="dc:title">Adresse reseau mappée</h3>
<h4 property="dc:author">WOLO Laurent</h4>
<!-- ... -->
</div><div about="ovh/posts/applications/developpement-reseau">
<h3 property="dc:title">Re : Adresse reseau mappée</h3>
<h4 property="dc:author">ovh</h4>
<!-- ... -->
</div>On peut faire de même pour des images. On utilise alors l'URI de l'image.
IV. Sémantique et social▲
On peut définir des informations sémantiques sur à peu près n'importe quoi, pour autant qu'une ontologie adaptée soit disponible. Si aucune n'est disponible, libre à vous d'en créer une ! On peut mélanger autant d'ontologies que nécessaire par page Web, d'où l'importance d'utiliser des espaces de noms pour stocker les ontologies, afin d'éviter que deux éléments de sémantiques différentes aient exactement la même dénomination.
IV-A. Informations de contact▲
Voici un exemple de code sur lequel nous nous baserons :
<div>
<p>
Prénom Nom
</p>
<p>
Email : <a href="mailto:mail@mail.com">mail@mail.com</a>
</p>
<p>
Numéro de téléphone : <a href="tel:0042-542-698-42">00 42 / 542 698 42</a>
</p>
</div>Il faut d'abord indiquer que ce <div> contiendra des données relatives à des informations de contact. Pour ce faire, il faut choisir une ontologie appropriée, comme FOAF. Ensuite, pour chaque élément, on va définir formellement sa sémantique.
<div typeof="foaf:Person" xmlns:foaf="http://xmlns.com/foaf/0.1/">
<p property="foaf:name">
Prénom Nom
</p>
<p>
Email : <a rel="foaf:mbox" href="mailto:mail@mail.com">mail@mail.com</a>
</p>
<p>
Numéro de téléphone : <a rel="foaf:phone" href="tel:0042-542-698-42">00 42 / 542 698 42</a>
</p>
</div>On crée ici un nœud de type foaf:Person, sans URI particulière définie. Il s'agit donc d'un blanknode.
IV-B. Réseautage social▲
Il ne s'agit pas de réseaux sociaux au sens de Facebook ou d'autres, plus d'indiquer sur une page des liens vers d'autres personnes, vers leurs sites, pour indiquer des liens entre les personnes.
On commence donc avec une liste simple de personnes (dans le cas d'un blog, il pourrait s'agir d'une liste de blogs d'amis) avec des liens vers leur site :
<ul>
<li><a href="http://aurore.name/">Aurore</a></li>
<li><a href="http://helen-is-my-name.com/">Hélène</a></li>
<li><a href="http://isp.net/websites/mywebsitehasnoname/">Aurélie</a></li>
</ul>Seul un humain peut ici y voir autre chose qu'une liste de liens pointant vers d'autres sites personnels ou blogs. Commençons par indiquer à l'ordinateur que l'on parle ici d'humains, de gens :
<div xmlns:foaf="http://xmlns.com/foaf/0.1/">
<ul>
<li typeof="foaf:Person"><a href="http://aurore.name/">Aurore</a></li>
<li typeof="foaf:Person"><a href="http://johan-is-my-name.com/">Johan</a></li>
<li typeof="foaf:Person"><a href="http://isp.net/websites/mywebsitehasnoname/">Aurélie</a></li>
</ul>
</div>typeof="foaf:Person" est ici l'attribut roi.
Vers quoi pointent ces liens ? Vers leurs profils sur un réseau social quelconque ? Vers leur page personnelle ?
<div xmlns:foaf="http://xmlns.com/foaf/0.1/">
<ul>
<li typeof="foaf:Person"><a rel="foaf:homepage" href="http://aurore.name/">Aurore</a></li>
<li typeof="foaf:Person"><a rel="foaf:homepage" href="http://johan-is-my-name.com/">Johan</a></li>
<li typeof="foaf:Person"><a rel="foaf:homepage" href="http://isp.net/websites/mywebsitehasnoname/">Aurélie</a></li>
</ul>
</div>Il suffit d'ajouter l'attribut rel="foaf:homepage" aux liens.
Quelle est donc la signification du lien du texte ? Est-ce le nom du site, le nom de la personne ?
<div xmlns:foaf="http://xmlns.com/foaf/0.1/">
<ul>
<li typeof="foaf:Person"><a rel="foaf:homepage" property="foaf:name" href="http://aurore.name/">Aurore</a></li>
<li typeof="foaf:Person"><a rel="foaf:homepage" property="foaf:name" href="http://johan-is-my-name.com/">Johan</a></li>
<li typeof="foaf:Person"><a rel="foaf:homepage" property="foaf:name" href="http://isp.net/websites/mywebsitehasnoname/">Aurélie</a></li>
</ul>
</div>Il s'agit maintenant d'ajouter un autre attribut aux liens, property="foaf:name".
Dernière innovation possible : des réseaux sociaux pourraient exploiter ces données. Sinon, à quoi serviraient-elles ? Il faut cependant leur indiquer qu'il s'agit des personnes que connaît le site de la personne concernée. En code, cela donne :
<div xmlns:foaf="http://xmlns.com/foaf/0.1/" about="#me" rel="foaf:knows">
<ul>
<li typeof="foaf:Person"><a rel="foaf:homepage" property="foaf:name" href="http://aurore.name/">Aurore</a></li>
<li typeof="foaf:Person"><a rel="foaf:homepage" property="foaf:name" href="http://johan-is-my-name.com/">Johan</a></li>
<li typeof="foaf:Person"><a rel="foaf:homepage" property="foaf:name" href="http://isp.net/websites/mywebsitehasnoname/">Aurélie</a></li>
</ul>
</div>about="#me" signifie que la section qui suit va parler de la personne qui possède cette page. Il ne signifie cependant pas que la personne en question se réduit à cette page !
rel="foaf:knows" indique que les personnes dont il sera question dans la section qui suit cette déclaration sont des connaissances de la personne dont on parle, indiquée par l'attribut about.
Avec ces informations, considérant que les sites liés disposent aussi de tels attributs, on peut construire un graphe de réseautage social, qui lie, à partir d'une page, d'autres pages de gens connus.
V. RDFa et standards XHTML▲
RDFa fait partie du standard XHTML 2. Malheureusement, il n'y a jamais eu de version finale de ce standard, seulement quelques notes publiées par le W3C. On ne peut donc pas vraiment dire qu'il existe.
Par contre, tout webmaster consciencieux devrait se soucier de la validité de ses pages Web. Or, les attributs RDFa ne sont pas disponibles en XHTML 1. Il suffit de changer le doctype du document afin d'utiliser XHTML+RDFa, soit XHTML 1 avec les attributs RDFa définis et donc permettant une validation XHTML.
Pour que votre document XHTML avec attributs RDFa soit valide, il suffit d'utiliser cet en-tête :
VI. Microformats▲
L'idée d'ajouter des éléments sémantiques n'est pas nouvelle et n'est pas limitée à une petite sphère d'élus. D'autres personnes ont déjà tenté d'ajouter de telles informations dans les pages Web. Par exemple, via les microformats, qui existent depuis 2004.
L'idée des microformats est d'utiliser les attributs HTML et XHTML déjà existants. De fait, ils ne posent strictement aucun problème de validation aux documents et ne se limitent pas aux documents XHTML.
Voici un exemple d'utilisation des microformats pour une localisation (repris du site officiel) :
<div class="location vcard">
<span class="fn org">Shakespeare's Pub </span>
<div class="adr">
<div class="street-address">314 East 6th Street</div>
<div class="locality">Austin, TX 78701</div>
</div>
</div>Par contre, il faut remarquer que les microformats ne peuvent pas être définis par tout le monde, leur but n'est pas d'être ouverts, mais simplement de répondre à un besoin précis. Ils veulent juste être simples à utiliser, à inclure dans des pages, d'abord prévus pour les humains puis seulement pour les machines.
En comparaison avec RDFa, il faut remarquer que les microformats sont plus répandus, ils sont d'ores et déjà implémentés chez Google et Facebook, par exemple. A contrario, Flickr et Drupal supportent le RDFa. (2)
Dernier point : les microformats (aussi µf) admettent que la voie du futur du Web sémantique passe par le RDFa, pas par les microformats. (3)
Possibilité plus futuriste : utiliser les nouvelles balises sémantiques du HTML5 et les microdonnées (microdata).
VII. Conclusion▲
Donner des informations sémantiques sur une page Web est réalisé extrêmement simplement à l'aide d'attributs RDFa et d'ontologies associées, il suffit de connaître les éléments définis par l'ontologie et, le cas échéant, des conventions définies par cette ontologie pour que tout parseur RDFa puisse prendre connaissance de ces éléments et les traiter comme il le souhaite.
VIII. Remerciements▲
Merci à snake264 et onjanirina pour leurs conseils et encouragements lors de la rédaction de cet article ! Merci à Claude Leloup pour sa relecture orthographique !