Balise HTML <data>

La balise <data> est un élément HTML qui associe un contenu visible à une version lisible par machine de la même valeur. Le texte compréhensible par l'utilisateur reste à l'intérieur de l'élément, tandis que la forme précise, adaptée aux scripts, est stockée dans l'attribut value.

Cela est utile lorsque vos scripts ont besoin de données dans un format spécifique que vous ne souhaitez pas afficher à l'utilisateur. Par exemple, imaginez une liste de produits. Chaque produit possède un identifiant interne, mais vous voulez que les acheteurs voient uniquement le nom du produit. Vous placez l'identifiant dans l'attribut value et le nom lisible entre les balises, afin que JavaScript puisse lire l'identifiant pendant que l'utilisateur lit le nom :

<data value="1545325112">Coca-Cola 500ml</data>

Ici, 1545325112 est la valeur lisible par machine (l'identifiant du produit) et Coca-Cola 500ml est ce que voit l'utilisateur.

Quand utiliser <data>

<data> est l'une des plusieurs façons d'associer des données lisibles par machine à un contenu. Choisir la bonne méthode est important :

• Utilisez <data> lorsqu'il existe un morceau de texte visible qui possède un équivalent naturel lisible par machine — un identifiant de produit, un numéro de commande, une référence SKU, une valeur d'énumération, une note exprimée sous forme de nombre. L'élément est un véritable élément HTML, donc la relation entre le texte et la valeur fait partie de la sémantique du document.
• Utilisez un attribut personnalisé data-* (par exemple data-product-id="1545325112") lorsque la valeur appartient à n'importe quel élément et que vous avez simplement besoin d'un espace pour que vos propres scripts puissent la lire. data-* est plus flexible car vous pouvez le placer sur n'importe quelle balise et utiliser n'importe quel nom d'attribut, mais il ne porte aucune signification standardisée.
• Utilisez les microdonnées (itemprop) ou JSON-LD lorsque l'objectif est d'exposer des données structurées aux moteurs de recherche (schema.org). <data> ne dit pas, à lui seul, à Google ce que la valeur signifie.

Un schéma courant consiste à combiner <data> avec les microdonnées, en utilisant itemprop pour nommer la propriété et value pour transporter le nombre précis :

<data itemprop="productID" value="1545325112">Coca-Cola 500ml</data>

<data> vs <time>

L'élément <time> est un élément frère spécialisé de <data>. La frontière sémantique est simple :

• Utilisez <time> uniquement pour les dates, les heures, les durées et les fuseaux horaires (il possède son propre attribut datetime et un format d'analyse défini).
• Utilisez <data> pour tout autre type de valeur lisible par machine — identifiants, prix, quantités, codes, etc.

Ainsi, <time datetime="2026-06-17">June 17</time> est correct, mais vous n'encapsuleriez jamais un identifiant de produit dans <time>.

Lire la valeur avec JavaScript

<data> est représenté par l'interface HTMLDataElement, dont la propriété value reflète l'attribut value. Vous pouvez donc le lire directement :

<data id="drink" value="1545325112">Coca-Cola 500ml</data>

<script>
  const el = document.getElementById("drink");

  console.log(el.value);                  // "1545325112"  (HTMLDataElement.value)
  console.log(el.getAttribute("value"));  // "1545325112"  (raw attribute)
  console.log(el.textContent);            // "Coca-Cola 500ml"  (visible text)
</script>

el.value et el.getAttribute("value") renvoient tous deux la chaîne lisible par machine ; textContent vous donne le libellé lisible par l'humain.

Accessibilité

Les technologies d'assistance telles que les lecteurs d'écran annoncent le contenu textuel visible, et non l'attribut value. Un utilisateur de lecteur d'écran entend "Coca-Cola 500ml", jamais "1545325112".

Pour cette raison, le texte visible doit toujours avoir un sens par lui-même. Ne cachez jamais dans value une information dont l'utilisateur a besoin en espérant que les lecteurs d'écran la révèlent. Traitez value strictement comme une donnée destinée aux scripts, et gardez tout ce qui est compréhensible par l'humain dans le texte de l'élément.

Compatibilité des navigateurs et SEO

Tous les navigateurs modernes interprètent <data>, mais il n'y a aucun rendu visuel ou comportemental particulier — il s'affiche exactement comme un <span>. Son rôle est purement sémantique.

Pour la même raison, <data> ne remplace pas les données structurées. Les moteurs de recherche n'interprètent pas un attribut value brut comme des données schema.org. Si vous avez besoin de résultats enrichis, utilisez des microdonnées appropriées (itemprop) ou, plus couramment aujourd'hui, JSON-LD.

Syntaxe

La balise <data> fonctionne par paires. Le contenu est écrit entre les balises ouvrante (<data>) et fermante (</data>).

Exemple de la balise HTML <data> :

Balise HTML <data>

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p>Refrigerated drinks</p>
    <ul>
      <li>
        <data value="1545325112">Coca-Cola 500ml</data>
      </li>
      <li>
        <data value="1545325113">Coca-Cola 330ml</data>
      </li>
      <li>
        <data value="1545325114">Coca-Cola Light 330ml</data>
      </li>
    </ul>
  </body>
</html>

Attributs

La balise <data> prend également en charge les Attributs globaux et les Attributs d'événement.

Pratique