The Tech Guy FR

On en parle depuis plus d’un an, mais avec la sortie de Firefox3.5RC, HTML5 est au centre de toutes les attentions geekesques en ce moment.

Je profite (de manière opportuniste) de cet engouement pour revenir en détail sur les avancées de cette nouvelle version.

Petit historique

HTML c’est LE langage derrière (presque) toute les pages Web qui existent. Il existe depuis 1991 et à connu depuis quelques changements :

1991 – HTML1.0 :  Première version.

1995 -  HTML2.0 : Spécification et normalisation des améliorations apportées par avec les sorties de Mosaic et Netscape; la balise image <img>,  formulaires <form>, etc.

1997 – HTML3.2 : Normalisation des balises de tableaux <table> et ajout de nombreux éléments de présentation

1997 – HTML4.0 : Normalisation des extension de script et de style (feuilles de style ou CSS), des cadres (frames), des objets de contenus <objet> (flash, java, etc.). Première apparition d’un système de variantes de format (strict, transitional, frameset)

Mais depuis … rien !

Enfin presque, depuis ça bouge du coté XHTML, mais aucune évolution significative côté HTML.

Et puis HTML5…

En Mars 2007, constatant le refus de XHTML2.0 comme standard par l’industrie, le W3C (L’organisme en charge de la normalisation des langages du Web) décide de relancer le travail sur HTML. Le 22 Janvier 2008, la première spécification de HTML5 était sortie avec comme principaux objectifs :

• Sortir des anciens démon de HTML et de s’en service bien comme un langage décrivant le contenu et non sa mise en forme ;
• Exister en deux alternatives : Une version XML (stricte) extensible et une version plus permissive pour assurer une compatibilité avec les analyseurs (parsers) existants ;
• Donner une priorité aux besoins des utilisateurs à ceux des développeurs et du respect des normes.

… qui apporte pas mal de nouveautés !

Alors que nous apporte concrètement HTML5  ?

De nouvelles balises de structure

Il y a quelques années pour découper une page, on utilisait un tableau (<table>, beark) ; ce qui était un non sens d’un point de vue sémantique. On a alors décidé d’utiliser les balises de division <div> que l’on mettait en page à l’aide de feuille de style. Nous avions alors bien une séparation de contenu et de mise en page.

HTML5 introduit de nouvelles balises pour améliorer cette manière de monter une page en utilisant les balises <header>,  <nav>, <section>,  <article>, <aside> et <footer>. L’intérêt est évident : On a toujours des balises qui nous permettent de diviser le contenu mais en en précisant le contenu.

Le fonctionnement de ces balises reste le même que celui des balises de division <div>, on peut donc les placer et les mettre en forme avec des feuilles de style.

L’intérêt de la chose peut ne pas sauter aux yeux, mais il est énorme. Un analyseur (par exemple GoogleBot) peut savoir que telle ou telle partie de votre page est une barre de navigation ou le contenu principal de votre page, par exemple un article. Imaginez les applications concrètes en terme de navigateurs ou de référencement !

On notera également l’abandon des balises de mise en forme comme <font> et <center>, qui étaient déjà devenues désuètes dans HTML4 avec la mise en place des feuilles de style ; désormais elles sont proscrites.

De nouvelles balises de médias

Finie la suprématie de flash pour le multimédia dans une page Web. Jusqu’ici pour insérer une vidéo ou un fichier audio dans une page, on avait guerre le choix ; il fallait passer par le plugin Flash (la plupart du temps) ou pour les plus kamikazes, des outils comme Real Media ou etc. De toute façon, en 1997, il était rare d’avoir une connexion suffisante pour télécharger un son instantanément, alors une vidéo…

Et puis vint les grosses ADSL, le Web2.0 MySpace, Youtube, Deezer, Dailymotion et consors. Le multimédia est désormais partie intégrante d’une page Web et lire une vidéo ou lire un MP3 est devenu un usage plus que courant.

HTML5 s’adapte à cette nouvelle donne en introduisant deux nouvelles balises : <video> et <audio>. Ces deux balises sont une énorme claque à Flash et Silverlight, désormais c’est au navigateur de gérer les éléments multimédias et de les lire, ce qui optimise l’utilisation des ressources (plus besoin de charger un plugin), permet de contrôler la lecture etc. par du Javascript, et pleins d’autres intéractivité.

De plus, cela apporte un vrai avantage sémantique, prenons le code suivant :

Imaginez les gains en terme de sémantique ! Un analyseur sait que votre élément audio de grande qualité (Si, si !) s’apelle Lorie – Le Week end, et qu’il date de 1997 (quand même !).

Si vous avez Firefox 3.5 et que vous voulez voir ce que cela donne en application, allez tester ça chez Dailymotion.

Bien entendu, ces balises peuvent être mise en style comme n’importe quel élément gràce à des feuilles de style, il est donc très simple de faire un lecteur simple avec un peu de CSS et de Javascript !

De nouvelles balises sémantiques

Trois nouvelles balises sémantiques sont introduites : <mark>, <time>, <meter> et <progress>.

<mark> permet de « marquer » un texte, comme par exemple des mots recherché dans un texte.

<time> permet de spécifier un temps donné au navigateur pour qu’il puisse par exemple, le traduire.

<meter> permet de spécifier une valeur numérique de mesure quelconque ainsi que son échelle, ce qui permet entre autre, aux navigateurs et moteur de recherche de comparer ces valeurs.

<progress> permet de spécifier une progression, par exemple, le pourcentage d’accomplissement d’un téléchargement.

De nouvelles balises d’interactivité

Trois nouvelles balises sont introduites pour intégrer à HTML ce qui est « bidouillé » habituellement, j’ai nommé l’interactivité des pages : <detail>, <menu> et <command>.

<detail> permet de spécifier un détail sur une partie de texte comme une aide ou une définition mais qui ne sera affiché qu’au survol ou sur une autre action, par exemple un tooltip.

<menu> et <command> permettent de définir des menus interactifs

Une balise de gestion de datagrid

Une balise <datagrid> a également été introduite pour insérer dans votre page une représentation de données en modèle de grille (arbre, tableaux, listes, etc.). Cette balise englobe un élément de liste (<table>, <select>, <ol>/<ul>, etc) dont elle récupère les données initiales ; il est alors possible en utilisant les méthodes fournies par HTMLDataGridElement de rendre dynamiques ces données, par exemple par des appels AJAX, lors de tri, de filtres, etc.

Encore une fois, on normalise ce qui était jusque là bidouillé en javascript.

Une balise de dessin vectoriel

La balise <canvas> a été introduite afin de pouvoir créer des éléments graphiques 2D en Javascript à la volée.

J’y reviendrais rapidement…

Un stockage DOM

Le DOM a été étendu pour ajouter une méthode de stockage d’informations, un peu similaire au cookies, permettant d’enregistrer des données de manière permanente dans le navigateur. Ce stockage offre une plus grande capacité de stockage (5Mo pour Firefox, 10Mo pour IE) et une interface plus simple à programmer. De plus, il offre deux modes : un mode session qui est limité à la session du navigateur ouvert et à une page donnée .