Éléments sémantiques

Dans un document Web, la sémantique est plus importante que ce que la plupart des auteurs pensent. Ce n’est pas forcement une histoire de rendu à l’affichage. La sémantique permet de  »typer » les données qui se trouvent dans le document. En fait les balises HTML (qui sont en fait des métadonnées) ont une utilité au delà du rendu sur un navigateur traditionnel. La sémantique est très utilisée par les robots ou les agents utilisateurs pour les personnes handicapées. Une bonne sémantique sur un document Web est la garantie d’un bon rendu sur les navigateurs pour personnes handicapées mais aussi la garantie d’un bon référencement (sous condition d’avoir un contenu intéressant bien évidement !).

Les usages du Web ont changé depuis l’apparition de HTML4. Devant l’importance de la sémantique, il fallait que HTML5 intègre de nouveaux éléments sémantique pour mieux coller aux usages courants. Voyons ce qu’il en est.

L’élément dialog

L’élément dialog permet de signaler un contenu de type conversation. C’est typiquement l’élément à utiliser quand on retranscrit une interview ou bien un chat. Cet élément est composé de deux éléments fils: dt et dd. Le premier sert à indiquer qui est le locuteur et le second contient sa locution. Voici un exemple d’utilisation:

<dialog>
<dt>Julien</dt>
<dd>T'as vu le draft de HTML 5 ?</dd>
<dt>Stephen</dt>
<dd>Ouais, ca semble sympa !</dd>
<dt>Julien</dt>
<dd>Carrément !</dd>
<dt>Stephen</dt>
<dd>J'aime particulièrement l'élément dialog !</dd>
 
</dialog>

Notez que ce qui est dans un dd est implicitement marqué comme une citation du locuteur déclaré dans le dt précédent. Ainsi, il n’est pas utile d’utiliser des éléments tels que blockquote ou cite.

L’élément nav

L’élément nav permet d’indiquer qu’un bloc est un menu de navigation. Son contexte et son utilisation est très simple: la structure d’un menu dans HTML5 est le même que dans HTML4 sauf qu’on le met entre deux balises nav.

L’élément time

time est un élément en ligne pour indiquer que ce qu’il contient est une date / heure. Son attribut datetime permet de spécifier le moment au format de temps universel. Voici un exemple:

 
Au quatrième top, il sera:
			<time datetime="2008-05-06T3:34:00-00:00">3h34 le 6 mai</time>.

Les éléments section, article, asside et address

L’élément section permet de subdiviser un document en plusieurs parties. Bien évidement, il y a déjà le div pour cela. La différence, c’est que section a une valeur sémantique (alors que div n’est là que pour la mise en forme). Par exemple, section peut servir à délimiter les chapitres d’un document.

L’élément article permet d’indiquer un morceau indépendant du document. On peut s’en servir pour signaler un billet de blog ou encore un article de journal. L’élément asside délimite un contenu en léger rapport avec le texte en cours. Il peut être assimilé a un encart de journal où l’on mettrait une citation. Pour finir, l’élément address permet d’indiquer des informations de contact concernant le container dans lequel il se trouve (le principe a donc été légèrement remanié par rapport à HTML 4). Quand son container parent est le body, c’est tout le document qui est concerné par ces informations. Voici un exemple concret d’utilisation de ces 4 éléments:

	<section>
<h1>La culture des bananes au Groenland</h1>
 
		<article>
<h2>Le climat du Grand Nord</h2>
 
 bla bla bla bla bla bla bla bla bla 
 
 bla bla bla bla bla bla bla bla bla 
<address>Publié par Jack Daniel dans Grand Nord Mag</address>
 
		</article>
		<article>
<h2>Les besoins de la banane</h2>
 
bla bla bla bla bla bla bla bla bla 
 
 bla bla bla bla bla bla bla bla bla 
<address>Publié par Johnie Walker dans Banane Hebdo</address>
 
		</article>
		<aside>
 
La bannane sert à faire le Bananas Split
 
		</aside>
	</section>

Les éléments header et footer

Si il y a quelque chose que l’on met quasiment à chaque fois sur nos documents HTML, c’est bien le traditionnel couple header / footer. Seulement, ce ne sont que des div (généralement). Ainsi, il n’est pas possible de savoir de façon sémantique que l’on est dans le cadre d’une en-tête et d’un pied de page.

C’est pour cela que HTML 5 propose les éléments header et footer. Le but est d’indiquer les informations d’en-tête et de pied de page d’un document (et non d’une section). Voici un exemple de l’utilisation de ces éléments:

<body>
	<header>
<h1>Présentation de HTML 5</h1>
 
</header>
	<section>
<h2>Introduction</h2>
 
 bla bla bla 
 
	</section>
	<section>
<h2>Multimedia</h2>
 
 bla bla bla 
 
	</section>
	<footer>
 
Document réalisé par Julien Quéré
 
</footer>
</body>

Les élément figure et legend

figure est un nouvel élément qui permet de délimiter une figure dans un document. Par figure on entend, bien évidement, les contenus multimédias (vidéo, image, canvas, son, …). Mais cela peut aussi concerner du texte (un extrait de poème ou de paroles de chanson par exemple). L’élément legend, quant à lui, permet d’indiquer une légende pour ce contenu. Notez que legend datte de HTML4 mais il est très peu utilisé. Voici un exemple d’utilisation de ces deux éléments:

 
Ma chanson préférée, c'est <a href="#fig1" title="Figure 1: Commandante des Fatals Picards">Commandante</a> des Fatals Picards.
<a href="#fig2" title="Figure 2: La pochette de l'album">La pochette</a> est particulièrement excellente. J'adore <a href="#fig3" title="Les paroles des Commandante">les paroles</a>.
 
<figure id="fig1">
	<audio src="http://monsite.com/dossier/fatals.mp3"></audio>
	<legend>Commandante par les Fatals Picards. Enregistré en 2001</legend>
</figure>
<figure id="fig2">
	<img src="http://monsite.com/dossier/fatals.jpg" alt="Une pochette de CD représentant un pamplemousse mécanique"/>
	<legend>La pochette de l'album des Fatals Picards</legend>
</figure>
<figure id="fig3">
 
<q>"Passer du crépuscule à l'ombre</br>
			Passer de le nuit aux décombres</br>
			De l'attente à n'en plus finir</br>
			Du desespoir à en vomir</br>
			Revolucion, revolucion</br>
			Viva tequila, Viva Guevara</br>
			Viva la fiesta, Viva la playa "
	</q>
 
	<legend>Extrait de <cite>Commandante</cite> des Fatals Picards</legend>
</figure>

L’élément m

L’élément en ligne m (pour « mark ») permet de marquer une partie d’un texte. En fait, c’est comme si on surlignait un passage sur une feuille de papier. Sémantiquement, il ne s’agit pas d’indiquer qu’un passage est plus important parce qu’il est entre balises m. Il s’agit juste de surligner une partie du texte. Par exemple, si on fait une recherche sur un site, il peut être intéressant de mettre entre m les mots clefs dans la page de résultats. Voici un exemple (si on avait cherché « Julien »):

 
<m>Julien</m> Quéré est né à la clinique Saint <m>Julien</m>. Son plat préféré est la <m>julien</m>ne de légumes

L’élément meter

Pour indiquer une valeur numérique d’un type particulier, HTML5 propose un nouvel élément en ligne: meter. Aucun format spécifique n’est imposé pour les données à l’intérieur du meter. Par contre, il est possible de situer la valeur au sein d’autres grâce aux attributs value, min, low, high, max et optimum. Voici un exemple d’utilisation simple de meter et un exemple replacent la valeur dans son contexte:

 
Pour délayer un peu, rajoutez <meter>12g</meter> de farine.

 
Votre fils a obtenu la note suivante: <meter value="15" min="0" max="20" low="3" high="19" optimum="20">B</meter>.

Dans le second exemple, on replace la note obtenue dans son contexte. On donne donc une valeur de 15 à un B. Les bornes possibles pour ces notes sont entre 0 et 20. La plus petite note obtenue a été 3 et la plus haute était 19. Bien évidement, la note optimale à un contrôle est de 20 !

L’élément progress

L’élément progress permet de matérialiser la progression d’un processus. Typiquement, cela peut représenter l’état d’avancement d’une tache ou d’un téléchargement. L’utilisation est simple: on précise l’état d’avancement actuel (avec l’attribut value) et l’état d’avancement final (avec l’attribut max). On peut aisément imaginer que les navigateurs matérialiseront cet élément avec une barre de progression. Voici un exemple concret:

 
Etat d'avancement de la présentation de HTML 5: 
<progress value="99" max="150">deux tiers</progress>