Le grand dossier du HTML 5

Publié le 16 avril 2010 par JB

Le HTML 5, c'est la nouvelle version du HTML. Après le HTML 4.01. C'est un format ouvert développé dès mars 2007 par la W3C après avoir été débuté fin 2003 par la WHATWG. La W3C étant l'organisme qui s'occupe de standardiser les formats du web depuis 1994. (HTML, XML, SVG, PNG pour les plus connus). Le très attendu brouillon de travail (Working Draft) est arrivé le 23 avril 2009, soit il y a presque un an. C'est depuis cette date que les moteurs de rendu ont pu commencer à adapter leur programme aux nouvelles normes du HTML 5.

Meilleure structuration des pages

Le html5, il suffit de le déclarer avec cette balise doctype :

 <!DOCTYPE html>

Cette dernière version du html propose plusieurs améliorations importantes, à commencer par une restructuration de l'organisation des pages. Les notions de bloc (block) et en-ligne (inline) disparaissent au profit de différentes catégories :

Metadata content
Flow content
Sectioning content
Heading content
Phrasing content
Embedded content
Interactive content

La balise <section> permet de découper le site en plusieurs parties (pratique pour le design notamment). On aura tendance à découper une section en différents <article>.

L'élement <aside> permet d'isoler un peu des objets n'ayant pas de rapport direct avec le reste de la page. (Liens vers des archives d'un site par exemple)

Les deux balises <header> et <footer> permettent de créer une en-tête et un pied de page directement. (titre d'un site, mentions légales, auteurs ...)

Le <nav> est une section pour naviguer sur le site (Articles, Accueil, Contact, etc.)

Pour recopier une discussion, on utilisera la balise <dialog>. Pratique pour Danstonchat

<figure> permet de regrouper des éléments avec leur légende (dans la balise <legend>)

Cette image vient d'Alsacréations

Voilà pour les grosses nouveautés de mise en page et d'organisation. Mais il reste 4 nouveaux élements de contenu qui nous intéressent énormément ... et qui ont beaucoup fait parler d'eux.

Ajouts de contenu

<video>, <audio>, <canvas> et une API de géolocalisation (utilisable en Javascript).

C'est dans ces quatres dernières améliorations que le libre est glorieux. Depuis toujours on ajoute du contenu Video, audio avec Flash, Quicktime, WMP ... des formats tous propriétaires. Aujourd'hui, il devient possible et même aisé d'inclure une vidéo ou de l'audio dans un site grâce aux deux balises éponymes. A condition que le navigateur reconnaisse le html 5, et qu'il intègre les codecs appropriés à la vidéo.

A propos des codecs vidéo

Alors que l'on penchait plutôt pour une reconnaissance ert une utilisation généralisée de l'Ogg Vorbis (bien connu pour le son) et de l'Ogg Theora (équivalent vidéo, moins connu). Des acteurs du débat ont effectivement préferer l'utilsiation du H.264 pour la vidéo, ce codec commence à se faire un nom, notamment dans le domaine de la HD, jugé plus puissant que l'Ogg Theora. Pourtant, l'utilisation des codecs MPEG n'est pas libre ... et même plutôt payante.

Seulement en Mai, lors de la conférence pour développeurs, Google devrait annoncer l'ouverture du codec VP8 suite au rachat de On2 Technologies. Une bonne solution a priori, pour résoudre le combat entre le H.264 (reconnu par Safari et dans la version 9 d'Internet Explorer) et l'Ogg Theora (défendu par Mozilla Firefox et Opera). Et comme Youtube appartient à Google ... cette nouvelle orientation vers le VP8 devrait se faire sans gros problème.

D'ailleurs, Youtube propose désormais aux utilisateurs d'utiliser la version "html 5" de leur site, qui inclut les vidéos au format VP8, mais qui n'est pour le moment pas disponible sous Firefox. Néanmoins, Dailymotion propose également de passer en version "html 5" en utilisant les codecs d'Ogg, cette fois-ci inclus dans Firefox et Opera.

Donc comme le souligne le site de Dailymotion, cet ajout de la balise <video> enlève bien tout objet Flashplayer, Quicktime, Silverlight ou WMP. Cette ouverture permettra également de coupler les images à du javascript et d'ajouter quelques fonctions sympas : flou, changement des couleurs, rotation de la vidéo, etc.

A première vue, néanmoins, cet ajout ne permettra pas de sécuriser le contenu vidéo posté en ligne, qui sera accessible via le code source par n'importe quel utilisateur. Ce contournement était déjà aisé avec Flashplayer, mais les webmasters devraient rapidement trouver un moyen de protéger leurs trésors des mains des pirates.

Un canevas pour remplacer Adobe

Il en est de même pour le <canvas>, qui définit un espace libre entièrement commandable en JS un peu à a manière de Tkinter en Python. On pourra alors créer des images, inclure des "widgets", bref c'est un espace libre, et ça devrait plaire à Google et son Web Elements.

Google, qui, au départ, ne misait pas trop sur les applications web, mais préferait les applications de bureau ( Earth par exemple). Mais depuis quelques années, et la réussite totale de Maps, la firme n'hésite plus à développer entièrement pour le web, des agenda, une suite de bureautique, etc. La revalorisation du JS à la place du logiciel Flash d'Adobe, et l'ajout de l'API de géolocalisation facilement implantable dans une carte Google Maps devrait largement les satisfaire et c'est pour ça que la firme mise gros sur le HTML 5.

La nouvelle standardisation (?) intéresse également Apple, qui n'a jamais intégré Flash aux Iphone/iPod/iPad comme j'en parlais dans cet article, mais qui assure que la version mobile de Safari est compatible html5.

Vers un système d'exploitation en ligne ?

Avec tout ça, on peut désormais se demander si les applications web ne vont pas remplacer les applications type "Bureau". Microsoft et Google annonçaient déjà que leur futur OS serait plus orienté internet, un des défauts est néanmoins qu'il faut être connecté ...

Eh bien grâce au html 5, ce ne sera plus le cas, des applications pourront être utilisées hors-connexion avec AppCache, qui permet d'enregistrer des documents, paramètres en local. Cool, non ?

Je n'osais jusqu'à présent jamais utiliser Google Docs et restais sur OpenOffice.org, je crois que ce changement va se faire assez rapidement !

Les moteurs de rendu y arrivent ?

Eh bien c'est (comme toujours) avec beaucoup d'étonnement que je constate que Trident (Internet Explorer) ne gère que quelques fonctions ... Gecko (Firefox) et Webkit (Safari, Chrome) sont à peu près égaux et gèrent les fonctions principales ... Presto (Opera) a une bonne avance et reconnait plus de la moitié des modifications recommandées par la W3C.

Tous les détails ici (en)

Et Flash, on en fait quoi ?

Dans la dernière version de la célèbre suite d'Adobe, CS 5, trônent Photoshop, Illustrator ... Flash. Et cette dernière version de Flash (qui coûte tout de même 700 $) inclut une sorte d'export compatible html 5 entièrement dans un <canvas>. J'imagine que les fonctionnalités ne seront pas toutes intégrées, mais cela montre déjà qu'Adobe se montre prêt à accepter une migration vers le html5 + JS, mais souhaite que son logiciel reste d'actualité et puisse servir aux développeurs.

Il est également à noter que Flash CS5 peut désormais compiler des applications pour les ipod, iphone, ipad d'Apple.

Pour conclure

En conclusion, le html5, c'est du tout bon. La re-structuration de l'organisation des pages n'est pas primordiale ni révolutionnaire, mais l'ajout des balises de video, canvas, la géolocalisation, l'Appcache, permettront réellement de faire avancer le web à pas de géants dans les années qui arrivent. Le gros coup de frein donné à Adobe, Microsoft et Apple laisse respirer le libre, et je n'en attendais pas plus !

Il ne reste plus qu'à espérer que les navigateurs le gèrent très rapidement ...

Pour aller plus loin / Sources :

Wikipédia html 5 Avec la liste entière des nouveautés

Moteurs de rendus et HTML 5 (wiki en)

Alsacreations

Bbxdesign

Papygeek - Flashplayer/Dailymotion

GNT Google VP8 et FSF demande de libérer le net

ZDnet Google VP8

Inovia Géolocalisation

PCinpact Flash CS5

Et bien sûr : http://www.w3.org/TR/html5/