Les nouveaux éléments HTML5

HTML5 propose un ensemble de nouveaux éléments. La spécification HTML5 fait évoluer le standard en offrant de nouvelles possibilités de balisage sémantique ainsi que des éléments orientés application riche.

Section

Le W3C spécifie l’élément section comme permettant de définir une zone dans un document. Il permet de grouper des éléments de manière thématique. L’élément section n’a pas vocation à structurer le document à des fin de présentation.

<section>
    <h1>Qui sommes-nous</h1>
    <p>texte de présentation</p>
</section>

<section>
    <h1>Les news</h1>
    <p>Nous serons présents au salon du bricolage en octobre</p>
</section>

Nav

L’élément nav permet de délimiter une section dont le rôle est de fournir des liens de navigation.

<nav id="top-nav">
    <ul>
    <li><a href="/a-propos/">A propos</a></li>
    <li><a href="/services/">Nos services</a></li>
    <li><a href="/contact/">Nous contacter</a></li>
    </ul>
</nav>

Header

L’élément header contient les information d’en-tête d’une section.

<section>
<header>
    <h1>Les nouveaux éléments HTML5</h1>
    <p>Présentation de leur utilisation pour
un balisage sémantique.</p>
<header>
</section>

Footer

L’élément footer définit le pied d’une section.

<section>
...
<footer>
<p>Site réalisé avec WordPress</p>
</footer>
</section>

Article

L’élément article est un type de section spécifique. Selon la spécification, l’article est une composition d’éléments destiné à être distribué ou réutilisé de manière indépendante (par exemple dans un flux de syndication). Cela peut par exemple être un post de forum, un article de magazine, un post de blog, etc.

<article>
    <header>
        <h1>Les nouveaux éléments HTML5</h1>
    </header>
    <p>Voici </p>
    <footer>
      Article publié dans WordPress sous licence CC
    </footer>
</article>

Aside

L’élément aside permet de contenir des informations liées au contenu principal mais n’en faisant pas partie. Utilisé dans un article, aside propose un conteneur lié à celui-ci. En dehors, le contenu de l’élément aside est lié au site.

La spécification dit que le contenu de l’élément aside est « tangentially related to the content arround the aside element ».  Donc « qui touche à la périphérie » du contenu autour.  Il semble donc que des informations telles qu’un glossaire, un encart de biographie ou une définition soient des éléments qui peuvent trouver leur place dans un élément aside.

<article>
    <header>
       <h1>Les nouveaux éléments HTML5</h1>
    </header>
    <p>Voici </p>
    <aside>
        <h1>A lire aussi :</h1>
        <p><a href="...">Faut-il passer à HTML5 ?</a></p>
    </aside>
    <footer>
        Article publié dans WordPress sous licence CC
    </footer>
</article>

Hgroup

Hgroup permet de grouper des éléments de H1 à H6 et s’utilise par exemple pour définir un sous-titre d’article, une baseline, etc.

<hgroup>
    <h1>Les nouveaux éléments HTML5</h2>
    <h2>Une optique résolument sémantique</h2>
</hgroup>

Time

L’élément date indique une date. l’attribut datetime permet de fournir une date lisible par une machine. L’élément time représente :

• Une heure dans un format 24 heures
• Une date correspondant au calendrier grégorien accompagnée optionnellement d’une heure et d’une indication du décalage correspondant à la zone géographique.

    <time datetime="2011-01-04">4 janvier 2011</time>
    <time datetime="2011-01-04T00:17:11">4 janvier 2011 à 0:17</time>
    <time datetime="2011-01-04T00:17:11+01:00">4 janvier 2011 à 0:17</time>

Le dernier exemple indique le décalage par rapport à l’heure GMT (+01:00 soit 1 heure).  A noter que le décalage de l’heure Paris par rapport à l’heure GMT n’est pas constant à cause du changement d’heure été / hiver.

Mark

L’élément mark est utilisé pour mettre en exergue une partie de texte qui selon la spécification n’avait peut être pas été considérée comme importante par l’auteur original du texte lors de son écriture mais se trouve maintenant faire l’objet d’un examen particulier.

<p><mark>Le HTML sémantique est une manière d'écrire le HTML qui met
l'accent sur le sens de l'information encodée plutôt que sur sa
présentation.</mark> Le HTML a pris en compte l'aspect sémantique
dès les premiers stades de sa conception, mais a aussi prévu des
éléments de présentation tels que ...</p>

Video

Jusqu’à ce jour il n’existe aucune méthode standard pour intégrer le la vidéo dans un document HTML, on fait systématiquement appel à des plugins (Flash, Quicktime, etc.). Cette situation pose de nombreux problèmes de compatibilité. Le tag video vise à fournir une méthode unique pour l’intégration de vidéos. Il subsiste un problème majeur : les grands acteurs de l’industrie ne parviennent toujours pas à se mettre d’accord sur les codecs qui devraient être supportés par les navigateurs. Le premier pas est fait, il sera un jour possible d’intégrer une vidéo en une ligne de code sans se poser plus de questions.

Lire un article sur l’intégration vidéo en HTML5 sur wikipedia (en).

<video src="video.webm" poster="video.jpg" controls="controls">
Texte qui s'affiche si le navigateur
ne prend pas en charge l'élément.</video>

Audio

Les considérations relatives à l’audio sont identiques à celles qui concernent l’élément video.

<audio src="audio.ogg" controls="controls">
Texte qui s'affiche si le navigateur
ne prend pas en charge l'élément.
</audio>

Canvas

L’élément canvas fournit une API qui permet de dessiner et d’analyser l’image présente dans cet élément. Le code d’intégration de cette balise ne présente pas d’intérêt, tout réside dans l’API qui permet de manipuler cette image en javascript.

Pour une démonstration de canvas, consulter la vidéo Google (en) qui présente un éditeur d’images réalisé en HTML5 qui utilise cet élément.