L'attribut data-*

Nathanaël Cherrier -

En HTML5 à été ajouté un attribut qui je pense sera (ou est déjà) très utile pour les développeurs. Je l’ai découvert il y a seulement 1 mois dans le cadre de l’un de mes projets professionnels. Pour que vous compreniez son intérêt, posons la problématique.

Jusqu’a maintenant, lorsque le développeur voulait stocker une information dans une balise html il avait deux attributs disponibles pour cette tache : l’attribut « id » et l’attribut « class ». Ces attributs remplissent très bien leur rôle mais l’on se retrouvait vite en manque de place.

Par exemple, si je veux que mon javascript réagisse spécifiquement en fonction du type, de la position, de la nature, etc :

<ul> 
    <li class="firstlevel"> 
        <ul> 
            <li class="secondlevel doc pdf sharedrep"></li>
        </ul> 
    </li>
</ul>

Pas très lisible même si cet exemple reste très soft. Et si l’on revient sur son code trois mois après il faut d’abord retrouver à quoi toutes ses classes correspondent pour comprendre pleinement notre code.

L’attribut data-* : petite révolution du HTML5

Pour pallier à ce léger problème, le W3C à standardisé l’*attribut data-**. Le principe est simple : lorsque vous cherchez un endroit où stocker une information nécessaire a votre javascript – ou autre – et que vous voudriez qualifier cette donnée, vous pouvez inventez un attribut data qui sera propre à votre code.

Cet attribut est totalement ignoré par les navigateurs, il n’y aura que votre code saura s’en servir.

Dans notre exemple cela ce traduirait ainsi :

<ul> 
    <li class="firstlevel"> 
        <ul> 
            <li class="secondlevel" data-nature="doc" data-type="pdf" data-partage="oui"></li> 
        </ul>
    </li> 
</ul>
  • Le code est plus lisible
  • Les données sont qualifiées et classées
  • Ça facilite la reprise du code
  • Et ça évite quelques erreurs dans le javascript

Attention : les données que vous stockez dans l'attribut data ne doivent pas être confidentiel car elle seront lisible dans le code html. 

Bien sûr cet attribut n’est utile que lors d’un traitement coté client et dans quelques cas spécifiques mais je suis que vous en trouverez rapidement une utilité !