05 fév. 2008

HTML 5: le web - revu à la hausse

Il est vrai que HTML 4.01 a bien vécu. Après 10 ans de "bons" et loyaux services, le roi est est sur le déclin, poussé à la retraite par des standards mieux conçus (XHTML, qui est une reformulation de HTML 4 en XML - dixit la page de présentation de ce méta-langage). Mais voici que son fils spirituel pointe le bout de son nez - sous la forme d'un standard en cours d'élaboration : HTML 5.

Focus sur le contenu

Si nous avons appris quelque chose ces dernières années, c'est que la présentation d'un site web se doit d'être réellement décorrélée du contenu de celui-ci, ne serai-ce que pour assurer l'accessibilité des documents. Exit donc les <table> pour mettre en forme les pages, et bienvenue au CSS. Ce shift radical a favorisé l'apparition de la notion de web sémantique - un web recentré sur l'idée de contenu - et, en conjonction avec d'autres avancées technologiques, l'apparition de réseaux d'utilisateurs.

HTML 5 pousse la barque dans la même direction - en supprimant certaines balises et attributs, en ajoutant des tags plus centrés sur le contenu, le futur standard cherche a capitaliser sur cette notion de web sémantique.

Les balises ajoutées

On pourrait renommer cette section: "ou comment publier un article sur le web". Beaucoup des nouvelles balises concernent la présentation de documents : on voit ainsi apparaître des balises <header>, <footer>, <article> ou encore <aside> (cette dernière étant destinées par exemple aux encarts insérées dans les articles). Autre nouveauté bienvenue, la balise <figure>, qui permet de lier une légende à une image ou a un tableau:

<figure>
  <img src="the_image.png" />
  <legend>ma légende</legend>
</figure>

Plus révélateur du parti pris des développeurs de la recommandation W3C : les balises sémantiques, qui ont pour but de remplacer les balises <span class="xxx"> qui se multiplient dans les documents HTML 4. <time>, <address>, <meter> ou <command> sont autant d'exemples de cette nouvelle vague de balises sémantiques (pour afficher respectivement une date ou une durée, une ou plusieurs adresses de contact, une mesure ou une commande utilisateur).

Les amateurs de multimédia en avait rêvé, les voici qui arrivent : les nouvelles balises <video> et <audio> viennent compléter les fonctionnalités multimédia du métalangage (qui était auparavant limité au texte et aux images, le reste étant implémenté en utilisant des plugins ou via le fonctionnement non normalisé de la balise <embed>, qui est maintenant associée à la gestion des plugins). La balise <canvas> délimite quand à elle une zone de dessin, qu'il est possible de manipuler via l'interface DOM définie. Au canvas est associé un contexte, qui représente les opérations de dessin qu'il est possible d'effectuer. Bonne nouvelle : si la norme en devenir ne présente que le contexte 2D, elle cite aussi explicitement l'API 3D OpenGL ES comme étant cible probable pour toute implémentation d'un contexte de canvas 3D.

Les attributs changés ou ajoutés

Les créateurs de formulaires vont apprécier : une partie de leur travail de validation va être déportée vers le navigateur. En effet, la balise <input> va accepter de nouveau type : datetime, datetime-local, date, month, week, time, number, range, email, url. On peut imaginer que c'est le navigateur qui va vérifier la validité du contenu de ces nouveaux champs - ce qui n'est pas plus mal, parce que vérifier la validité d'une adresse email ou d'une url est tout sauf trivial. De plus, un attribut required est ajouté aux balise <input>. Au final, on simplifie d'autant la validation des formulaires - c'est une grande nouvelle pour les concepteurs de site web.

Pour les amateurs d'interactivité, voici venu le temps des pages éditable (toutes les balises peuvent utiliser l'attribut contenteditable) et des éléments contrôlés par la souris (idem, toutes les balises peuvent utiliser l'attribut draggable)

Ou l'on supprime quelques petites choses...

Parce qu'à force d'en ajouter, on va finir par n'avoir plus que ça...

La principale balise supprimée concerne la gestion des frames : enfin, nous allons avoir des pages sans frames (pourvu qu'elles soient conçues en utilisant HTML 5... ce qui n'est pas gagné). Exit donc les <frameset>, <frame> et <noframe> à l'origine de plus d'un mécontent.

Le groupe de travail a supprimer d'autres balises qui n'ont qu'un effet de présentation : basefont, big, center, font[1], s, strike, tt et u. On leur préférera les balises sémantiques ou des <span>.

Au niveau des attributs, le ménage a été fait : exit les attributs qui ne servent qu'à forcer la présentation des items affichés (background, align, bgcolor, valign, style[2] et bien d'autres).

La valse des API

A nouvelles balises, nouvelles API. Ainsi, les futurs navigateurs se verront non seulement dotés d'API de rendu de dessin en 2 - voire 3 - dimensions, mais on leur adjoindra aussi des API de contrôle de la vidéo et de l'audio associées aux balises <video> et <audio>. Bien évidemment, ce qui vaut pour les nouvelles balises vaut aussi pour les nouveaux attributs. Le Drag & Drop et la gestion des contenus éditables seront ainsi entièrement supportés au niveau du navigateur.

Mais ce n'est pas tout - et là, on attaque un morceau intéressant. Ce futur standard du web a pour mission de favoriser l'écriture d'applications web off-line. De nouvelles API assurant ce support vont donc voir le jour, et parmi elles:

  • la possibilité pour une application web d'enregistrer un type de fichier MIME
  • une API de gestion du stockage persistant

Ce qui ne veut pas dire que les application web online sont négligées pour autant : que dire de la nouvelle API réseau qui sera ajoutée au standard, ou de la possibilité de gérer des évènements générés par le serveur ? Elles représentent à elles seules une avancée formidable.

Conclusion

HTML 5 n'en est pour l'instant qu'au stade de l'enfance. Et pourtant, son potentiel est déjà énorme : je vois d'ici apparaître les premiers navigateurs avec un support partiel des derniers drafts. Ces navigateurs permettront l'implémentation de solutions web comme jamais nous n'en avons vu auparavant : 2D, 3D, échanges asynchrones entre le client et le serveur, contenu éditable de tous les cotés, gestion de la persistance des données, etc.

Le draft courant est disponible sur le site du W3C. Cet article a été inspiré du récent HTML 5 differences from HTML 4 publié sur le même site.

Même si ses concepteurs s'en défendent en assurant qu'il ne s'agit que d'une évolution, HTML 5 promet d'être une vraie révolution dans le monde du web. Le parti pris du web sémantique, lié à de nouvelles fonctionnalités multimédia et à de puissantes API vont faire de la nouvelle version de ce métalangage l'une des avancées technologique majeures de ces 5 prochaines années. Rendez-vous est pris pour la sortie officielle du standard !

Notes

[1] avec la note suivante: although [the font element] is allowed when inserted by a WYSIWYG editor due to limitations in the state of the art in user interface for these editors

[2] sauf sur <font>

Ajouter un commentaire

Les commentaires peuvent être formatés en utilisant une syntaxe wiki simplifiée.

Fil des commentaires de ce billet