I. Introduction▲
Une des caractéristiques principales de HTML5 est qu'il ne cassera rien au support existant pour les versions précédentes. Tout le code HTML4 continuera de fonctionner. Si on veut faire mieux, il suffira d'introduire les doses de HTML5 là où c'est nécessaire. Rien ne doit être modifié pour utiliser ces nouvelles fonctionnalités, HTML5 se base sur sa version précédente. Par exemple, pour ajouter un peu de Web sémantique à des pages HTML4 déjà existantes, il suffit de changer le doctype du document et de se laisser aller à ajouter les quelques balises et attributs qu'il faut.
Commençons tout d'abord par modifier le doctype. En HTML5, il est très simple, il est seul et unique, il ne fait que quinze octets dans les encodages sur huit bits :
<!DOCTYPE html>II. Les éléments sémantiques▲
HTML5 apporte le support de nouveaux éléments pour aider le navigateur à déterminer la sémantique d'une page. Ces éléments sont faciles à comprendre et à assimiler pour tout qui connaît un peu d'anglais. Passons-les en revue, car les microdonnées peuvent s'ajouter à ces balises.
II-A. Balises▲
| Balise | Signification |
|---|---|
| <section> | Une section représente un document générique ou une section d'une application. Par exemple, il pourrait s'agir d'un titre et du texte subordonné, comme toute section du présent article. |
| <nav> | Il s'agit d'une section particulière d'une page, celle qui contient les liens dits de navigation. Il n'est pas nécessaire de mettre tous les liens d'une page dans une telle balise, seuls les plus gros blocs de liens devraient y trouver place. |
| <article> | Une partie qui se suffit à elle-même d'une page, qui pourrait être redistribuée telle quelle, sans ce qui l'entoure, comme un post sur un blog ou un forum. |
| <aside> | Des éléments qui sont reliés au contenu mais sans en faire partie trouvent place dans ces balises. Dans un livre, cela correspond au texte mis dans les colonnes sur les côtés, par exemple. |
| <hgroup> | L'en-tête d'une section, utilisé pour grouper des éléments h1 à h6 quand la page possède plusieurs niveaux de titres. |
| <header> | Des aides à la navigation, tout l'en-tête du site. On attend généralement que cet élément contienne le titre principal h1 de la page, mais ce n'est pas requis. On peut aussi y placer un espace de recherche ou la table des matières de la page. |
| <footer> | Le bas de la page. Par exemple, on pourrait placer dans une telle balise la fin de cette page, avec un lien vers le forum, une page de contact, le copyright, etc. |
| <time> | Une heure sur une horloge à 24 heures, une date précise dans le calendrier grégorien. |
| <mark> | Une portion de texte marquée pour référence ultérieure. |
II-B. Exemples▲
Cette suite de descriptions peut paraître assez difficile à intégrer, à comprendre, d'où ces quelques exemples.
II-B-1. L'en-tête▲
On va se baser sur l'en-tête simplifié d'un blog pour cette section.
<div id="header">
<h1>Blog de Tartempion</h1>
<p class="pun">Voici le titre de mon blog. </p>
<ul>
<li><a href="/">Accueil</a></li>
<li><a href="/author/">L'auteur</a></li>
</ul>
</div>Ce code est tout à fait valide en HTML5 ! Cependant, le standard définit des balises beaucoup plus précises pour exprimer la signification du contenu.
II-B-1-a. <header>▲
Pour indiquer ce qu'est l'en-tête d'un blog, avec un titre, un sous-titre et un menu, l'opération est très simple.
II-B-1-b. <hgroup>▲
Reste cependant le sous-titre... On ne peut pas le mettre tel quel en titre de niveau deux, ni mettre les articles du blog en tant que titres de niveau trois. La solution ? <hgroup>.
<header>
<hgroup>
<h1>Blog de Tartempion</h1>
<h2>Voici le titre de mon blog. </h2>
<hgroup>
<ul>
<li><a href="/">Accueil</a></li>
<li><a href="/author/">L'auteur</a></li>
</ul>
</header>Cette balise permet d'encadrer plusieurs titres liés ; cela signifie que, si l'on devait réaliser une structure arborescente de la page, ces deux titres seraient dans la même case et subordonneraient tous les titres de la page, qu'ils soient de niveau deux ou inférieur.
II-B-2. Le contenu▲
Cette fois, prenons pour exemple un article simplifié du blog.
<div class="post">
<p class="date">Posté le premier avril 2011</p>
<h2>Mon article</h2>
<p>
Lorem ipsum dolor.
</p>
</div>II-B-2-a. <article>▲
Tout d'abord, on peut exprimer que le div contient ici un article.
<article>
<header>
<p class="date">Posté le premier avril 2011</p>
<h1>Mon article</h1>
</header>
<p>
Lorem ipsum dolor.
</p>
</article>Il faut cependant ici remarquer que la balise <h2> s'est muée en <h1> et s'est retrouvée dans un élément <header>. En effet, cette dernière balise veut rassembler tous les éléments de l'en-tête d'un article.
Ensuite, on remarque aisément ce qui choquera bon nombre de personnes habituées à HTML4 : la présence de plusieurs <h1> par page !
En effet, chaque article est une nouvelle section dans la page ; en tant que tel, il possède un titre de niveau un. Dans la représentation de la page, on pourrait voir chaque article comme une petite page, possédant elle aussi son en-tête, son pied de page... et son titre de niveau un.
Pourquoi diable un tel changement ? Beaucoup de pages sont générées à l'aide de systèmes de templates. Cette méthode permet de simplifier fortement les algorithmes sous-jacents des frameworks Web (plus besoin de se rappeler à quel niveau s'arrête le template parent, il suffit que chaque article existe avec ses titres qui sont cohérents s'il devait être affiché seul).
II-B-2-b. <time>▲
Dans cet en-tête, on a défini une date, que nous interprétons comme la date de publication. Il faudrait l'indiquer clairement au navigateur. Ensuite, on peut l'écrire dans n'importe quelle langue, le navigateur doit pouvoir l'interpréter correctement. D'où le changement suivant :
<article>
<header>
<time datetime="2011-04-01" pubdate>Posté le premier avril 2011</time>
<h1>Mon article</h1>
</header>
<p>
Lorem ipsum dolor.
</p>
</article>On aurait aussi pu définir une heure de publication au format 24 heures avec un décalage horaire :
<article>
<header>
<time datetime="2011-04-01T12:42:42+02:00" pubdate>Posté le premier avril 2011</time>
<h1>Mon article</h1>
</header>
<p>
Lorem ipsum dolor.
</p>
</article>Il faut faire attention à l'emplacement de cette balise de temps : dans un élément article, elle définit la date de publication de l'article ; en dehors, elle définit la date de publication du document dans son entièreté.
II-B-3. La navigation▲
Ici, on se basera sur une simple liste d'éléments définissant le menu d'un site.
<div id="tabs">
<ul>
<li><a href="/">Accueil</a></li>
<li><a href="/author/">L'auteur</a></li>
</ul>
</div>II-B-3-a. <nav>▲
II-B-4. Le pied de page▲
Aujourd'hui, on distingue deux tendances dans les pieds de page : soit extrêmement légers (une notice de copyright et assez peu d'informations en tout), soit extrêmement lourds (avec plusieurs colonnes de liens).
Le principe est le même dans les deux cas : il faut encapsuler le pied de page dans la balise associée, <footer>. Ensuite, pour des pieds de page plus lourds, vient l'étape d'une subdivision, pour indiquer ce que signifie chaque colonne. Pour ce faire, on se basera sur le pied de page du W3C :
<div id="w3c_footer">
<div class="w3c_footer-nav">
<h3>Navigation</h3>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/standards/">Standards</a></li>
<li><a href="/participate/">Participate</a></li>
<li><a href="/Consortium/membership">Membership</a></li>
<li><a href="/Consortium/">About W3C</a></li>
</ul>
</div>
<div class="w3c_footer-nav">
<h3>Contact W3C</h3>
<ul>
<li><a href="/Consortium/contact">Contact</a></li>
<li><a href="/Help/">Help and FAQ</a></li>
<li><a href="/Consortium/sup">Donate</a></li>
<li><a href="/Consortium/siteindex">Site Map</a></li>
</ul>
</div>
<div class="w3c_footer-nav">
<h3>W3C Updates</h3>
<ul>
<li><a href="http://twitter.com/W3C">Twitter</a></li>
<li><a href="http://identi.ca/w3c">Identi.ca</a></li>
</ul>
</div>
<p class="copyright">Copyright © 2009 W3C</p>
</div>II-B-4-a. <footer>▲
Tout d'abord, il faut encadrer tout ça dans un pied de page bien défini :
<footer>
<div class="w3c_footer-nav">
<h3>Navigation</h3>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/standards/">Standards</a></li>
<li><a href="/participate/">Participate</a></li>
<li><a href="/Consortium/membership">Membership</a></li>
<li><a href="/Consortium/">About W3C</a></li>
</ul>
</div>
<div class="w3c_footer-nav">
<h3>Contact W3C</h3>
<ul>
<li><a href="/Consortium/contact">Contact</a></li>
<li><a href="/Help/">Help and FAQ</a></li>
<li><a href="/Consortium/sup">Donate</a></li>
<li><a href="/Consortium/siteindex">Site Map</a></li>
</ul>
</div>
<div class="w3c_footer-nav">
<h3>W3C Updates</h3>
<ul>
<li><a href="http://twitter.com/W3C">Twitter</a></li>
<li><a href="http://identi.ca/w3c">Identi.ca</a></li>
</ul>
</div>
<p class="copyright">Copyright © 2009 W3C</p>
</footer>II-B-4-b. <nav> et <section>▲
Ensuite, on remarque qu'il y a deux types de colonnes : les deux premières donnent des liens de navigation et entrent donc dans des <nav> ; la dernière définit quelques liens externes liés au site et entre donc dans un <section>.
On modifie également les niveaux des titres, comme pour les articles.
<footer>
<nav>
<h1>Navigation</h1>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/standards/">Standards</a></li>
<li><a href="/participate/">Participate</a></li>
<li><a href="/Consortium/membership">Membership</a></li>
<li><a href="/Consortium/">About W3C</a></li>
</ul>
</nav>
<nav>
<h1>Contact W3C</h1>
<ul>
<li><a href="/Consortium/contact">Contact</a></li>
<li><a href="/Help/">Help and FAQ</a></li>
<li><a href="/Consortium/sup">Donate</a></li>
<li><a href="/Consortium/siteindex">Site Map</a></li>
</ul>
</nav>
<section>
<h1>W3C Updates</h1>
<ul>
<li><a href="http://twitter.com/W3C">Twitter</a></li>
<li><a href="http://identi.ca/w3c">Identi.ca</a></li>
</ul>
</section>
<p class="copyright">Copyright © 2009 W3C</p>
</footer>II-C. En résumé▲
Voici donc ce à quoi pourrait ressembler la page de blog :
<!doctype html>
<html>
<head>
<title>Mon blog</title>
</head>
<body>
<nav>
<ul>
<li><a href="/">Accueil</a></li>
<li><a href="/author/">L'auteur</a></li>
</ul>
</nav>
<header>
<hgroup>
<h1>Blog de Tartempion</h1>
<h2>Voici le titre de mon blog. </h2>
<hgroup>
<ul>
<li><a href="/">Accueil</a></li>
<li><a href="/author/">L'auteur</a></li>
</ul>
</header>
<article>
<header>
<time datetime="2011-04-01T12:42:42+02:00" pubdate>Posté le premier avril 2011</time>
<h1>Mon article</h1>
</header>
<p>
Lorem ipsum dolor.
</p>
</article>
<footer>
<nav>
<ul>
<li><a href="/">Accueil</a></li>
<li><a href="/author/">L'auteur</a></li>
</ul>
</nav>
</footer>
</body>
</html>II-D. Le cas XHTML5▲
Il est aussi possible d'utiliser un formalisme XML pour le nouveau standard HTML5. La spécification XHTML5 n'apporte rien par rapport aux spécifications de XML, il suffit donc d'écrire ses documents XHTML5 comme des documents XHTML1.
La principale différence, cependant, est qu'il n'est pas nécessaire de mettre un DOCTYPE :
XML documents may contain a DOCTYPE if desired, but this is not required to conform to this specification.
Le reste de la spécification n'est pas intéressant dans notre cas.
On remarque aussi que de nouvelles choses sont possibles en HTML5 et totalement réprimandées en XML, notamment :
On procédera donc avec le même artifice qu'en XHTML1 :
<time datetime="2011-04-01T12:42:42+02:00" pubdate="pubdate">...</time>On aura donc un code comme celui-ci :
<!doctype html>
<html>
<head>
<title>Mon blog</title>
</head>
<body>
<nav>
<ul>
<li><a href="/">Accueil</a></li>
<li><a href="/author/">L'auteur</a></li>
</ul>
</nav>
<header>
<hgroup>
<h1>Blog de Tartempion</h1>
<h2>Voici le titre de mon blog. </h2>
<hgroup>
<ul>
<li><a href="/">Accueil</a></li>
<li><a href="/author/">L'auteur</a></li>
</ul>
</header>
<article>
<header>
<time datetime="2011-04-01T12:42:42+02:00" pubdate="pubdate">Posté le premier avril 2011</time>
<h1>Mon article</h1>
</header>
<p>
Lorem ipsum dolor.
</p>
</article>
<footer>
<ul>
<li><a href="/">Accueil</a></li>
<li><a href="/author/">L'auteur</a></li>
</ul>
</footer>
</body>
</html>Vous remarquerez la présence d'un DOCTYPE. Ceci permet de valider le document par les outils mis à disposition par le W3C, le fait qu'il s'agisse d'un document XHTML5 ne dérange nullement le valideur.
III. Les microdonnées▲
On vient de voir toute une série d'éléments nouveaux dans HTML5. Cependant, ces nouveaux éléments, aussi sémantiques soient-ils, ne permettent pas de tout définir. Comment décrire une personne, comme on peut le faire en RDFa ? Peut-on créer une balise <person> ? Ce n'est pas envisageable. Il faut donc regarder à côté pour trouver une autre manière de faire.
Les microdonnées annotent l'arbre DOM avec des paires nom-valeur de vocabulaires personnalisés avec une certaine portée.
Ici, remarquons l'utilisation du terme vocabulaire : pour définir des microdonnées, il faut utiliser certains vocabulaires qui donneront tout leur sens aux annotations.
Aussi, ces microdonnées sont définies avec une certaine portée : tous les enfants d'une certaine balise utiliseront le même vocabulaire, pas les frères ou sœurs de cette balise, qui pourront utiliser d'autres vocabulaires, à leur guise.
Ces microdonnées sont une manière d'ajouter des informations à la base HTML existante, elles fournissent un vocabulaire plus riche et plus précis que ce que peut fournir le HTML.
La définition des vocabulaires a bien évidemment été normalisée. Google met à disposition une liste des vocabulaires déjà définis.
III-A. Valeurs des propriétés▲
Ajouter des microdonnées à un texte revient à ajouter des attributs aux éléments HTML déjà existants. En général, la valeur de ces propriétés correspond au contenu texte (pas les autres balises, donc). Voici un tableau récapitulatif à ce sujet, avec les exceptions pour lesquelles la valeur n'est pas le contenu textuel.
| Élément | Attribut pris pour valeur |
|---|---|
| <meta> | content |
| <audio>, <embed>, <iframe>, <img>, <source>, <video> | src |
| <a>, <area>, <link> | href |
| <object> | data |
| <time> | datetime |
Tous les autres éléments voient leur contenu textuel pris pour valeur. Par exemple,
<h1>Mon titre</h1>aura pour valeur Mon titre.
III-B. Description d'une personne▲
Pour décrire une personne, on utilisera le vocabulaire http://data-vocabulary.org/Person.
<section>
<h1>Tartempion</h1>
<p><img src="http://tarte.net/photo.jpg"></p>
<p><a href="http://tarte.net/">Mon site</a></p>
</section>On définira le champ d'action de ce vocabulaire comme étant l'élément courant et ses enfants. Seul le contenu de la balise <section> doit être marqué, c'est donc lui qui hérite de ces attributs.
<section itemscope itemtype="http://data-vocabulary.org/Person">
<h1>Tartempion</h1>
<p><img src="http://tarte.net/photo.jpg"></p>
<p><a href="http://tarte.net/">Mon site</a></p>
</section>Ensuite, il faut marquer chaque élément pour indiquer sa sémantique propre, à l'aide d'attributs itemprop :
<section itemscope itemtype="http://data-vocabulary.org/Person">
<h1 itemprop="name">Tartempion</h1>
<p><img itemprop="photo" src="http://tarte.net/photo.jpg"></p>
<p><a itemprop="url" href="http://tarte.net/">Mon site</a></p>
</section>Que contient d'autre ce vocabulaire ?
| Propriété | Signification |
|---|---|
| name | Nom |
| nickname | Surnom |
| photo | Photo |
| title | Titre |
| role | Rôle |
| url | Page Web |
| association | Association à une organisation (employeur, par exemple) |
| friend, contact, acquaintance | Relation sociale avec une autre personne |
| address | Localisation (peut posséder les sous-propriétés street-address (adresse), locality (localité), region (région), postal-code (code postal), country-name (pays)) |
L'adresse est un autre élément de microdonnées ! Il faut donc utiliser un vocabulaire spécifique (http://data-vocabulary.org/Address).
<dl>
<dt>Adresse</dt>
<dd itemprop="address" itemscope itemtype="http://data-vocabulary.org/Address">
<span itemprop="street-address'>Rue de Mouscron, 42</span><br>
<span itemprop="postal-code">1042</span>
<span itemprop="locality">Bruxelles</span><br/>
<span itemprop="country-name">Belgium</span>
</dd>
</dl>Remarquez que l'on n'est pas obligé de spécifier tous les champs d'une adresse, seulement ceux qui sont utiles dans ce cas. De même, tous les pays ne suivent pas forcément ce type de format d'adresses ; cependant, il devrait être utilisable dans la très grande majorité des cas.
III-C. Description d'une société▲
Là aussi, un vocabulaire est prévu. Il s'agit de http://data-vocabulary.org/Organization.
| Propriété | Signification |
|---|---|
| name | Nom |
| url | Page Web |
| address | Adresse de la société, comme pour une personne |
| tel | Numéro de téléphone |
| geo | Coordonnées géographiques, avec latitude et longitude |
Prenons pour exemple Google. En HTML5, avant les microdonnées, la page à propos pourrait contenir ceci :
<article>
<h1>Google, Inc.</h1>
<p>
1600 Amphitheatre Parkway<br>
Mountain View, CA 94043<br>
USA
</p>
<p>650-253-0000</p>
<p><a href="http://www.google.com/">Google.com</a></p>
</article>Commençons par définir le vocabulaire utilisé.
<article itemscope itemtype="http://data-vocabulary.org/Organization">
<h1>Google, Inc.</h1>
<p>
1600 Amphitheatre Parkway<br>
Mountain View, CA 94043<br>
USA
</p>
<p>650-253-0000</p>
<p><a href="http://www.google.com/">Google.com</a></p>
</article>Cette société a un nom.
<article itemscope itemtype="http://data-vocabulary.org/Organization">
<h1 itemprop="name">Google, Inc.</h1>
<p>
1600 Amphitheatre Parkway<br>
Mountain View, CA 94043<br>
USA
</p>
<p>650-253-0000</p>
<p><a href="http://www.google.com/">Google.com</a></p>
</article>Le premier paragraphe en définit l'adresse.
<article itemscope itemtype="http://data-vocabulary.org/Organization">
<h1 itemprop="name">Google, Inc.</h1>
<p itemprop="address" itemscope itemtype="http://data-vocabulary.org/Address">
1600 Amphitheatre Parkway<br>
Mountain View, CA 94043<br>
USA
</p>
<p>650-253-0000</p>
<p><a href="http://www.google.com/">Google.com</a></p>
</article>Maintenant, il faut définir chaque champ de l'adresse.
<article itemscope itemtype="http://data-vocabulary.org/Organization">
<h1 itemprop="name">Google, Inc.</h1>
<p itemprop="address" itemscope itemtype="http://data-vocabulary.org/Address">
<span itemprop="street-address">1600 Amphitheatre Parkway</span><br>
<span itemprop="locality">Mountain View</span>, <span itemprop="region">CA</span> <span itemprop="postal-code">94043</span><br>
<span itemprop="country-name">USA</span>
</p>
<p>650-253-0000</p>
<p><a href="http://www.google.com/">Google.com</a></p>
</article>Pour les informations téléphoniques, la procédure n'est pas très différente. Remarquons que l'on sort de la balise de paragraphe pour laquelle on a utilisé le vocabulaire Address, on retourne donc au vocabulaire Organization. De même pour le site Web.
<article itemscope itemtype="http://data-vocabulary.org/Organization">
<h1 itemprop="name">Google, Inc.</h1>
<p itemprop="address" itemscope itemtype="http://data-vocabulary.org/Address">
<span itemprop="street-address">1600 Amphitheatre Parkway</span><br>
<span itemprop="locality">Mountain View</span>, <span itemprop="region">CA</span> <span itemprop="postal-code">94043</span><br>
<span itemprop="country-name">USA</span>
</p>
<p itemprop="tel">650-253-0000</p>
<p itemprop="url"><a href="http://www.google.com/">Google.com</a></p>
</article>On peut évidemment définir plusieurs numéros de téléphone, plusieurs sites Web. Il suffit de définir les éléments sémantiques à l'aide de span et non dans un paragraphe :
<article itemscope itemtype="http://data-vocabulary.org/Organization">
<h1 itemprop="name">Google, Inc.</h1>
<p itemprop="address" itemscope itemtype="http://data-vocabulary.org/Address">
<span itemprop="street-address">1600 Amphitheatre Parkway</span><br>
<span itemprop="locality">Mountain View</span>, <span itemprop="region">CA</span> <span itemprop="postal-code">94043</span><br>
<span itemprop="country-name">USA</span>
</p>
<p>
US: <span itemprop="tel">650-253-0000</span><br>
UK: <span itemprop="tel">00-1-650-253-0000</span>
</p>
<p itemprop="url"><a href="http://www.google.com/">Google.com</a></p>
</article>Dernier élément : la géolocalisation, définie elle aussi dans son propre vocabulaire, http://data-vocabulary.org/Geo. On peut, par exemple, l'utiliser comme ceci :
<article itemscope itemtype="http://data-vocabulary.org/Organization">
<h1 itemprop="name">Google, Inc.</h1>
<p itemprop="address" itemscope itemtype="http://data-vocabulary.org/Address">
<span itemprop="street-address">1600 Amphitheatre Parkway</span><br>
<span itemprop="locality">Mountain View</span>, <span itemprop="region">CA</span> <span itemprop="postal-code">94043</span><br>
<span itemprop="country-name">USA</span>
</p>
<p>
US: <span itemprop="tel">650-253-0000</span><br>
UK: <span itemprop="tel">00-1-650-253-0000</span>
</p>
<p itemprop="url"><a href="http://www.google.com/">Google.com</a></p>
<span itemprop="geo" itemscope itemtype="http://data-vocabulary.org/Geo">
<meta itemprop="latitude" content="37.4149" />
<meta itemprop="longitude" content="-122.078" />
</span>
</article>III-D. En XHTML5▲
Comme précédemment, peu de choses sont à changer. En guise d'exemple, voici le dernier snippet adapté pour XHTML5 :
<article itemscope itemtype="http://data-vocabulary.org/Organization">
<h1 itemprop="name">Google, Inc.</h1>
<p itemprop="address" itemscope="itemscope" itemtype="http://data-vocabulary.org/Address">
<span itemprop="street-address">1600 Amphitheatre Parkway</span><br>
<span itemprop="locality">Mountain View</span>, <span itemprop="region">CA</span> <span itemprop="postal-code">94043</span><br>
<span itemprop="country-name">USA</span>
</p>
<p>
US: <span itemprop="tel">650-253-0000</span><br>
UK: <span itemprop="tel">00-1-650-253-0000</span>
</p>
<p itemprop="url"><a href="http://www.google.com/">Google.com</a></p>
<span itemprop="geo" itemscope="itemscope" itemtype="http://data-vocabulary.org/Geo">
<meta itemprop="latitude" content="37.4149" />
<meta itemprop="longitude" content="-122.078" />
</span>
</article>IV. Conclusion▲
Il ne s'agit ici que d'une introduction, donnant les principes nécessaires à l'utilisation de tous les vocabulaires disponibles.
Merci à Julien Plu pour son aide et ses encouragements lors de la rédaction de cet article ! Merci à Claude Leloup pour sa relecture orthographique ! Merci à gifbengif pour les quelques coquilles restantes !