XHTML

HTML5 se dévoile

Article par juliegri (Etudiante ^^, Fegersheim)
Mis à jour le 13 Mars 2010. 50259 lectures.
Tags : xhtml, w3c, html, balises, éléments, doctype, audio, vidéo, html5, attributs, canvas, article, section, aside

Comme vous avez dû le lire, le brouillon officiel (working draft) de HTML5 a été publié officiellement le 23 avril 2009. Puisque les travaux sur XHTML 2 se termineront cette année 2009, profitons de cette occasion pour faire un tour d'horizon de cette nouvelle version de HTML.

Qu'est-ce que c'est le HTML 5 ?

Comme son nom l'indique, HTML 5 est le successeur de HTML 4.01. Le travail sur HTML 5 a commencé fin 2003 grâce à un groupe de travail indépendant, mais ce n'est qu'en 2007 que le W3C officialise HTML5 en intégrant en son sein ce groupe de travail. À partir de là s'est fait un gros travail afin de permettre à HTML 5 d'être rétrocompatible avec ses ancêtres, ce qui a quelque peu ralenti son développement.

Le W3C c'est quoi déjà ?

Le World Wide Web Consortium, abrégé par le sigle 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, 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

kind of content in HTML 5

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.

Seule la version XHTML 5 obligera à fermer ces éléments.

Notons par ailleurs que les éléments <html>, <body>, <head>, <colgroup> et <tbody> peuvent être omis.

Plus fort encore, certains éléments ne nécessitent ni balise fermante ni balise ouvrante, c'est le cas de <html>, <head>, <body>, <thead>, <tfoot> et <tbody>. Cela signifierait que la présence même de ces éléments devient implicite.

Les balises principales

Doctype

Le doctype est simplifié :

<!DOCTYPE html>

Documentation 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é) des navigateurs.

Section

L'élément <section> permet de définir les différentes 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 provenant d'une source externe, 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 depuis hier soir : le W3C vient d'annoncer que ses travaux sur XHTML 2 se termineront cette année 2009.</p>
</article>

Documentation sur l'élément Article

Aside

L'élément <aside> est destiné au contenu indirectement lié à l'article lui-même, il représente ce qui l'entoure comme par exemple une barre latérale d'archives.


<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>
<a href="index.php">Page d'accueil</a>
<a href="contact.php">Contact</a>
</nav>

Documentation sur l'élément Nav

Dialog

L'élément <dialog> peut être utilisé pour définir une conversation.


<dialog>
 <dt> Raphaël
 <dd> Hello, comment ça va ?
 <dt> Julie
 <dd> Bien merci et toi ? 
 <dt> Raphaël
 <dd> Super merci, tu as vu la nouvelle opération Kiwiz ? 
 <dt> Julie
 <dd> Ah oui c'est top, je crois que je vais me commander un livre qui parle des Sims 3.
</dialog>

... bien que les éléments de listes de définition (dt, dd) soient explicitement utilisés dans l'exemple proposé par le W3C, cet usage nous semble assez incongru.

Documentation sur l'élément Dialog

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 <legend>.


<figure>
<img src="/images/chaton.jpg" />
  <legend>Un petit chat mignon tout plein</legend>
</figure>

Documentation sur l'élément Figure

Aides à la création d'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>

Une discussion : http://padawan.info/fr/2009/07/tag-cest-pas-gagne.html

Documentation sur l'élément video
Documentation sur l'élément audio

Canvas
Illustration des 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. Un éditeur qui fonctionne entièrement sur canvas a d'ores et déjà été mis en place par Mozilla (article sur alsacreations.com).

Documentation sur l'élément Canvas

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

Les sites web hors-ligne

Une API permettra d'activer les applications Web hors connexion.

innerHTML
C'est une manière facile d'analyser et de sérialiser un document HTML ou XML. Cet attribut n'était précédemment disponible que sur HTMLElement dans les navigateurs Web et ne faisait partie d'aucun standard.
Géolocalisation
L'API Géolocalisation introduite par le W3C permet aux pages web d'interroger le navigateur sur la position de l'utilisateur. Plus d'informations

... Les autres balises

<embed>, <mark>, <meter>, <progress>, <time>, <command>, <datagrid>, <details>, <datalist>, <keygen>, <bb>, <output>, <ruby>, <rt> et <rp> <datatemplate>, <rule>, <nest>

HTML 5 propose également un mécanisme de template en introduisant les éléments <template>, <datatemplate>, <rule> et <nest>. Encore en construction, cette partie des spécifications manque actuellement de détails et d'exemples concrets.

... Les autres attributs

contenteditable, contextmenu, draggable, irrelevant, ref, registrationmark, template, data-*

Les nouveaux types de l'élément input

datetime, datetime-local , date , month , week , time , number , range , email , url , search , color

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>

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 header et footer

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 au lieu d'y implémenter toute une série de plugins pour faire des choses finalement pas très compliquées.

Qui l'utilise déjà ?

Tous les navigateurs ont d'ores et déjà implémenté certains de ces éléments. Il faudra cependant attendre des mises à jour pour que l'ensemble du vaste panel HTML5 (éléments, attributs, APIs, WebForms) soit correctement interprété. La liste des navigateurs et de leur compatibilité avec les différents éléments à cette adresse : http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28HTML_5%29

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>…etc.

Il reste cependant une question :
"Est-il possible à l'heure actuelle d'utiliser HTML5 en production réelle ?"

A cette question, le site bbxdesign.com répond de manière plutôt pragmatique : "ça dépend" : http://bbxdesign.com/2009/06/08/introduction-au-html-5/

Ressources :