<data> en HTML : relier un texte lisible à une valeur pour les machines

Dans une boutique en ligne, chaque produit affiche un nom lisible, « T-shirt bleu marine », mais un script de tri ou de filtrage a besoin d'une référence stable, une valeur qui ne change jamais même si le nom affiché est retouché plus tard par l'équipe marketing. Comment lier les deux sans dupliquer l'information ni la cacher dans un attribut détourné de son usage ?

<data> répond exactement à ce besoin : il associe un texte lisible par une personne à une valeur exploitable par une machine, sans rien changer à ce qui s'affiche à l'écran.

Définition

<data> enveloppe un texte destiné à l'affichage et porte, via son attribut value, la valeur machine correspondante. Le contenu visible reste celui que voit le visiteur, tandis que value reste invisible à l'écran et n'existe que pour les scripts ou les outils qui analysent la page.

Syntaxe et l'attribut value obligatoire

L'attribut value n'est pas optionnel : sans lui, la balise perd toute sa raison d'être, puisque c'est justement ce qu'il porte qui distingue <data> d'un simple passage de texte.

<ul>
  <li><data value="REF-2481">T-shirt bleu marine</data></li>
  <li><data value="REF-2482">T-shirt gris chiné</data></li>
</ul>

Différence avec <time> pour les dates

<data> convient à toute valeur machine générique, une référence produit, un code postal, un identifiant. Les dates et les heures suivent une règle à part, avec la balise <time> et son propre attribut datetime, reconnu spécifiquement par les navigateurs et par des outils externes comme les agendas ou les moteurs de recherche.

Cas d'usage concret

Dans une liste de produits générée dynamiquement, un script peut lire l'attribut value de chaque <data> pour trier ou filtrer les articles par référence stable, sans jamais dépendre du texte affiché qui peut évoluer. <data> appartient à une petite famille de balises qui associent un texte visible à une valeur exploitable : <meter> fait de même pour une mesure dans une échelle connue, et <output> pour le résultat calculé d'un formulaire.

Un annuaire de points de vente offre un autre exemple courant : chaque ligne affiche un nom de ville lisible, « Paris 15e », tout en portant dans l'attribut value le code postal exact, « 75015 », utilisé par un script de recherche géographique pour trier les résultats par proximité sans jamais reformuler le texte visible à l'écran.

Bonnes pratiques

• N'utilisez <data> que lorsqu'aucune balise plus spécialisée ne convient déjà mieux, en particulier pas pour des dates qui relèvent de <time>.
• Gardez toujours un texte affiché qui reste compréhensible seul, sans dépendre de la lecture de la valeur machine par un script, puisque tous les visiteurs ne bénéficient pas forcément de ce script actif.
• Ne comptez jamais sur l'attribut value pour cacher une information sensible : il reste parfaitement lisible dans le code source de la page, comme n'importe quel autre attribut HTML.

Questions fréquentes

Non, jamais par défaut. Seul le texte placé entre les balises ouvrante et fermante s'affiche à l'écran, la valeur de l'attribut reste réservée aux scripts ou à l'inspection du code source par une personne curieuse.

Ce n'est pas recommandé : la spécification réserve explicitement les dates et les heures à <time>, dont le format d'attribut est vérifié et compris par des outils externes comme les agendas ou les moteurs de recherche, un bénéfice que <data> n'offre pas.

La page ne casse pas, mais la balise perd tout son intérêt : elle s'affiche comme un simple passage de texte, sans aucune valeur machine associée, ce qui revient en pratique à ne pas avoir utilisé <data> du tout.