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.
