HTML5 est à nos portes

Avertissement : ce dont je vais parler sont des choses qui sont dans un brouillon. Autrement dit, rien n'est figé dans le marbre, et ce que je décris est susceptible d'évoluer, de changer, dans les mois à venir. Notez aussi que mon billet n'est pas exhaustif.

Comme vous avez dû le lire, le brouillon officiel de HTML5 a été publié officiellement le 23 avril 2009. Puisque les travaux sur XHTML2 serons abandonnés 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 ?

Le 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étro-compatible avec ses ancêtres, ce qui a quelque peu ralenti son développement.

Globalement, HTML5 reprend la majorité des éléments de HTML4. Cependant HTML5 définit aussi nombre de nouveaux éléments, mais aussi d'API qui faciliteront à terme le développement d'applications web modernes.

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 :

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

Alors contrairement au HTML 4.01, la version XHTML 5 obligera à fermer ces éléments:

,

,

,

, , , , , , , et

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

Structure d'un document

Il y a différentes balises pour découper un document en plusieurs parties :

• section, article, aside (encart sur le coté)
• header (en-tête de section) et footer (pied de page).
• On a aussi dialog pour les conversations (une sorte de dl), dfn pour les définitions, time pour représenter une date/heure

Contenu embarqué

Le contenu multimédia envahit les sites web. Il est donc logique que HTML5 fournisse des éléments spécifiques :

• figure pour légender du contenu embarqué (si j'ai bien compris)
• video pour intégrer de la video. Je parleraides avantages de la balise video par rapport à object, dans un billet future. Sachez que l'implémentation de cette balise est toujours en bonne voie dans Opéra et Firefox (pas sûr cependant que cela prêt à temps pour être intégré dans Firefox 3).
• audio pour du son
• canvas pour afficher/dessiner des graphismes dynamiquement, que vous pouvez d'ores et déjà utiliser dans Firefox 2 mais aussi dans Safari je crois.

Formulaires

Les formulaires dans HTML4 sont particulièrement simplistes. HTML5 remédie à cela en rajoutant des attributs et des possibilités sur l'ensemble des balises de formulaires existantes (form, input etc..). Notez cependant que cette section n'est pas encore écrite dans le brouillon de la spécification de HTML5.

Éléments interactifs

HTML5 définit des nouvelles balises qui sont similaires à ce que l'on trouve dans le langage XUL. À savoir des balises pour avoir des éléments d'interfaces riches.

datagrid permet d'afficher un arbre de données, sur plusieurs colonnes si il le faut. On peut lui fournir donc un objet javascript qui s'occupera de renvoyer un certain nombre d'informations pour générer le contenu d'un datagrid. Et comme les cellules de la grille peuvent être éditables, on peut se faire un tableur facilement .

On a aussi progress pour afficher une barre de progression et meter pour afficher une jauge.

Il y a aussi un système de commandes, bien qu'il soit moins évolué en HTML5. On a ainsi un élément command pour déclarer des commandes et un attribut command pour rattacher des éléments à une commande précise.

Vous avez aussi les menus avec menu, qui peuvent se transformer en toolbar avec type="toolbar" ou en menu contextuel avec type="contextmenu". Pour spécifier les items de menus, il faut apparemment réutiliser des éléments html comme li pour les items simples, et select pour les menus déroulants.

Les templates

HTML5 propose aussi un mécanisme de template, avec la balise datatemplate. Bye bye xmlHttpRequest pour nombres de choses ! :

• avec une balise datatemplate, on décrit quoi et comment générer le contenu. On a ainsi une balise rule pour spécifier des rêgles, des conditions, et une balise nest pour faire du récursif.
• Sur un élément dans lequel on veut générer du contenu dynamiquement, on indique l'url du template dans un attribut template, et l'url de la source de donnée dans l'attribut ref.
• le template et la source de donnée sont bien sûr séparés, et peuvent être inclus dans le document même ou dans un fichier séparé. Ce qui veut dire par exemple que la génération de la page HTML et des données peut se faire séparément.
• la source de donnée est un morceau de HTML (et/ou peut être de XML )

La spécification est encore vraiment floue sur les templates je trouve. Cela semble cependant très prometteur.

Conclusion

C'est un brouillon, mais ce qui avait été promis est en train de se concrétiser. HTML5 va permettre de faciliter énormément le développement des applications web de demain.

On peut remarquer que l'intérêt du XUL diminue vu que HTML5 reprend quelques concepts de XUL. Mais pour le moment, XUL reste quand même très intéressant par d'autres aspects, dont son modèle de boîtes. En effet, nulle part dans la spec de HTML5 il n'est expliqué le modèle de boîte. Mais peut être que cela se fera plus tard.

NB:je suis en train de préparer un article plus détaillé sur HTML 5, avec des exemples de code et des schémas explicatifs, à bien tôt et n'oubliez pas de laisser vos commentaires merci .