On lit (et écrit également, c'est fatal) beaucoup de choses sur HTML5 depuis quelques années. Au programme des réjouissances on trouve pêle-mêle le tag canvas pour faire du graphisme programmatique, le stockage local pour, par exemple pour le mode offline des applications web, les désormais célèbres tags audio et video déjà utilisés par dailymotion et youtube, le drag and drop... J'en passe et des meilleurs.
Par contre une nouveauté à propose de laquelle je n'avais jamais rien lu et que j'ai découvert hier ce sont les embedded custom non-visible data attributes, c'est là dire des méta informations sous forme d'attributs que l'on peut ajouter à loisir sur n'importe quel élément d'une page HTML et qui peuvent être lus et interprétés par un script dans la page. C'est un peu équivalent à ce qu'il est possible de faire avec XHTML en ajoutant des attributs définis par ses propres namespaces.
Un exemple :
<ul id="pointsOfInterest"> <li data-latitute="48°51" data-longitude="2°17">La tour Eiffel</li> <li data-latitute="48°38" data-longitude="1°30">La mont Saint-Michel</li> </ul>
Ensuite avec un script on peut utiliser ces coordonnées. Par exemple on peut monter où se trouve le lieu sur une carte.
/* par exemple avec jQuery */
$("#pointsOfInterest > li").click(function() {
var lat = $(this).dataset("latitude");
var long = $(this).dataset("logitude");
showOnMap(lat, long);
}
Un autre exemple : utilisation d'un attribut data-at pour afficher des sous-titres en fonction d'un time-code dans une présentation audio (lue avec le tag audio il va sans dire) : http://www.toolness.com/wp/?p=772.
Je trouve cette nouvelle façon de passer des données supplémentaires très intéressante ; elle est surtout plus simple à mettre en œuvre que les namespaces en XHTML. Toutefois, et c'est sans doute la raison pour laquelle on en parle peu, les navigateur ne l'implémente pas encore. Pour ceux qui sont tout de même pressés de jouer avec, il existe un plugin jQuery qui permet de simuler l'objet dataset : HTML5 Dataset jQuery Plugin.