Le brouillon officiel (working draft) de HTML5 a été publié officiellement le 23 avril 2009 et depuis de nombreuses avancées ont été accomplies, les navigateurs supportant toujours plus de fonctionnalités et de nouveautés. La nouvelle génération du langage de balisage HTML remplacera à long terme HTML 4, XHTML 1.x et XHTML 2 qui a été abandonné. Profitons de cette occasion pour faire un tour d'horizon de cette nouvelle version de HTML.
Consultez également toutes nos autres ressources HTML5
Qu'est-ce que c'est HTML5 ?
Comme son nom l'indique, HTML 5 est le successeur de HTML 4. Le travail sur HTML 5 a commencé fin 2003 grâce à un groupe de travail indépendant qui préconisait une approche pragmatique, le WhatWG, contrairement au W3C qui misait tous ses efforts sur XHTML 2. Ce n'est qu'en 2007 que le W3C accepte la vision HTML5 en intégrant en son sein ce groupe de travail. Les principes de conception sont clairs : simplifier l'usage de HTML, officialiser les pratiques courantes, et assurer un maximum de rétro-compatibilité.
Le W3C c'est quoi déjà ?
Le World Wide Web Consortium, abrégé W3C, est un organisme de standardisation à but non-lucratif, fondé en octobre 1994 comme un consortium chargé de promouvoir la compatibilité des technologies du World Wide Web telles que HTML, XHTML, XML, RDF, CSS, PNG, SVG et SOAP. Le W3C n'émet pas des normes au sens européen, mais des recommandations à valeur de standards industriels. Parmi les membres du W3C on compte les plus grands acteurs du Web actuels tels que Microsoft, IBM, Opera, Google, Apple, etc.
Quelles sont les nouveautés ?
Une grande nouveauté annoncée au niveau structurel des éléments est signalée dans l'introduction du brouillon de HTML5 : The new content model concepts (replacing HTML 4's block and inline concepts)
.
Les notions de type "en ligne" et "bloc" semblent donc remplacées par un nouveau schéma, les éléments HTML sont à présent uniquement regroupés en catégories, sachant que les éléments peuvent apparaître dans plusieurs catégories :
- Metadata content
- Flow content
- Sectioning content
- Heading content
- Phrasing content
- Embedded content
- Interactive content
Ainsi, au vu de cette nouvelle organisation, le code suivant est parfaitement valide car l'élément <a> peut entourer des paragraphes, des listes, des tableaux voire des sections entières :
<aside>
Welcome!
<a href="about.html">
This is home of...
<h1>The Falcons!</h1>
The Lockheed Martin multirole jet fighter aircraft!
</a>
This page discusses the F-16 Fighting Falcon's innermost secrets.
</aside>
Rappelons également que HTML5, en tant que digne successeur de HTML 4.01, offre la même permissivité que sa version transitionnal : il n'est pas systématiquement nécessaire de fermer tous les éléments. Ainsi, les éléments <p>, <dd>, <dt>, <li>, <optgroup>, <option>, <rt>, <rp>, <td>, <th>, <tr>, <thead> et <tfoot> n'ont pas besoin de balise fermante pour être valides. Même s'il est toujours recommandé de bien organiser votre code et de faire confiance aux bonnes pratiques établies jusqu'à présent. Seule la forme d'écriture XHTML 5 obligera à fermer ces éléments, mais il est très contraignant de s'y conformer.
Les balises principales
Doctype
Le doctype est simplifié :
<!DOCTYPE html>Plus d'informations sur l'élément Doctype
Il n'est pas sensible à la casse (on peut écrire <!doctype html> par exemple), et son rôle est uniquement d'éviter un rendu en mode «Quirks» (ou mode de compatibilité) pour les anciens navigateurs.
Section
L'élément <section> permet de définir les grandes sections d'un document comme par exemple les chapitres, les en-tête et pied-de-page, ou toute autre section dans un document. Il peut être combiné avec les éléments h1, h2, h3, h4, h5, et h6 pour une meilleure définition de la structure du document.
Documentation sur l'élément Section
Article
<article> représente un texte indépendant, une portion de contenu, comme par exemple un article de journal, de blog ou de forum.
<article>
<p>
<a href="http://www.alsacreations.com/actu/lire/746-xhtml-est-mort-vive-html.html">
XHTML est mort, vive HTML !</a>
<br />
Sous ce titre quelque peu provocateur (et faux) se cache une réalité officielle :
le W3C vient d'annoncer que ses travaux sur XHTML 2 se termineront en 2009.
</p>
</article>
Documentation sur l'élément Article
Aside
L'élément <aside> est destiné au contenu tangentiel, une sorte de bonus au contenu principal, que ce soit pour un article ou l'ensemble d'un document HTML.
<aside>
<h1>Archives</h1>
<ul>
<li><a href="/archives/09/05/">Mai 2009</a></li>
<li><a href="/archives /09/06/">Juin 2009</a></li>
<li><a href="/archives /09/07/">Juillet 2009</a></li>
</ul>
</aside>
Documentation sur l'élément Aside
Header
L'élément <header> représente l'en-tête d'une section ou d'une page.
Documentation sur l'élément Header
Footer
L'élément <footer> représente le pied de page d'une section ou d'une page pour mettre les informations concernant l'auteur, les mentions légales…etc.
Documentation sur l'élément Footer
Nav
L'élément <nav> représente une section de liens de navigation.
<nav>
<ul>
<li><a href="index.php">Page d'accueil</a></li>
<li><a href="contact.php">Contact</a></li>
</ul>
</nav>
Documentation sur l'élément Nav
Figure
L'élément <figure> peut être utilisé pour regrouper des éléments tels que des images ou des vidéos avec leur légende <figcaption>.
<figure>
<img src="/images/chaton.jpg" alt="Oh le beau chaton" />
<figcaption>Un petit chat mignon tout plein</figcaption>
</figure>
Documentation sur l'élément Figure
D'autres nouvelles balises
<embed>, <mark>, <meter>, <progress>, <time>, <command>, <details>, <datalist>, <keygen>, <bb>, <output>, <ruby>, <rt> et <rp> <datatemplate>, <rule>, <nest>, <summary> et <details>
Nouveaux types de l'élément input
De nouveaux types pour l'attribut type="" de la balise <input> voient le jour. Ils visent à faciliter la saisie des données par l'utilisateur :
datetime, datetime-local, date, month , week, time, number, range, email, url, search, color
Exemple : <input type="date"> devrait permettre d'afficher un calendrier pour sélectionner une date.
Attributs
Glisser-déposer
L'attribut draggable permet de rendre un élément déplaçable.
Documentation sur l'attribut draggable
Contenteditable
Cet attribut indique qu'une zone est éditable. L'utilisateur peut en changer le contenu et manipuler le balisage.
Documentation sur l'attribut Contenteditable
Spellcheck
Cet attribut active ou non la correction orthographique.
Il existe d'autres nouveaux attributs HTML5 spécifiques à certains éléments uniquement (par exemple ping sur <a>, charset sur <meta>), ou bien applicables à tous. Par exemple contextmenu, hidden, data-*, etc.
Médias et applications web (APIs et DOM)
<audio> et <video>
Ces éléments sont utilisés pour les contenus multimédia.
<audio>
<!-- Deux formats disponibles par ordre de priorité: -->
<source src="trappeur.ogg" type="audio/ogg">
<source src="trappeur.aac" type="audio/aac">
<!-- Contenu alternatif si élément audio ou formats non supportés dans le navigateur: -->
<a href="trappeur.ogg">Télécharger <cite>Avant j'étais trappeur</cite></a>
de David TMX (format Ogg Vorbis)
</audio>
Documentation sur l'élément video
Documentation sur l'élément audio
Canvas
L'élément <canvas> a été introduit afin de pouvoir créer des éléments graphiques 2D en Javascript à la volée. Il permet de mettre en place une zone pour les dessins ou les applications graphiques.
Documentation sur l'élément Canvas
Applications web hors-ligne (Offline web apps)
Une API permet d'activer les applications web hors connexion.
Géolocalisation
L'API Géolocalisation introduite par le W3C permet aux pages web d'interroger le navigateur sur la position de l'utilisateur (latitude, longitude).
Les éléments et attributs devenus obsolètes
-
<frame>,<frameset>,<noframes>(jugés néfastes à l'utilisabilité et l'accessibilité) -
<acronym>disparaît au profit de<abbr> -
accesskey(dans<a>,<area>,<button>,<input>,<label>,<legend>et<textarea>) -
longdesc(dans<img>et<iframe>) -
name(dans<img>,<form>et<a>) -
language(dans<script>) -
summary(dans<table>) -
<basefont>,<big>,<center>,<font>,<s>,<strike>,<tt>,<u>, etc...
Les éléments redéfinis
-
<a>(pour les ancres) -
<menu>(c'est en fait un élément réhabilité de HTML2) -
<b>,<i>,<small>,<strong>(section de texte lue ou interprétée différemment du texte "normal") -
<hr> - etc...
A quoi cela va bien pouvoir servir ?
Les nouveaux sites pourront adopter les balises telles que <header> pour remplacer les <div id= "header"> que l'on trouve sur la plupart des sites construits actuellement.
Les éléments sont plus spécifiques et permettent une structure commune des sites et ainsi une meilleure accessibilité puisqu'une structure commune permettra entre autre aux synthétiseurs vocaux de se développer et aux personnes mal voyantes de se repérer plus facilement. De nouvelles fonctionnalités permettront aussi d'utiliser HTML et uniquement HTML en natif, au lieu d'y implémenter toute une série de plugins JavaScript voire d'extensions propriétaires.
Qui l'utilise déjà ?
Tous les navigateurs ont d'ores et déjà implémenté certains de ces éléments, mais HTML est un standard vivant, en évolution constante, notamment du côté des API. La liste des navigateurs et de leur niveau de compatibilité avec les différents éléments est consultable sur Wikipedia et il est possible de rechercher des fonctionnalités spécifiques sur le site Caniuse.com. Pour savoir s'il est risqué ou réalise d'utiliser telle ou telle partie de HTML5, consultez HTML5Please.
En conclusion...
HTML5 propose de nouveaux éléments très pratiques qui ont pour objectif d'harmoniser les médias et de structurer la mise en page par des éléments plus "sémantiques". Il permettra également de faciliter sensiblement l'accessibilité au contenu et l'interopérabilité étant donné que les formats propriétaires tels que Flash ou SilverLight pourraient être concurrencés par des éléments tels que <audio> ou <video>. De plus, l'analyse des pages par des robots ou par des synthétiseurs vocaux sera facilité par les éléments <header>, <nav>… et par Microdata.