Élément HTML <data> : l'élément de données

Baseline Large disponibilité

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis octobre 2017.

L'élément HTML <data> associe un contenu donné à une version interprétable par une machine. Si le contenu concerne une date ou une heure, il faut utiliser l'élément HTML <time>.

Dans cet article

Exemple interactif

<p>Nouveaux produits&nbsp;:</p>
<ul>
  <li><data value="398">Mini Ketchup</data></li>
  <li><data value="399">Jumbo Ketchup</data></li>
  <li><data value="400">Méga Jumbo Ketchup</data></li>
</ul>

data:hover::after {
  content: " (ID " attr(value) ")";
  font-size: 0.7em;
}

Attributs

Cet élément inclut les attributs universels.

value

Cet attribut définit la version du contenu qui doit être interprétée par une machine.

Exemples

Dans l'exemple suivant, on affiche des noms de produits avec des codes correspondants.

html
<p>Nouveaux produits&nbsp;:</p>
<ul>
  <li><data value="398">Mini Ketchup</data></li>
  <li><data value="399">Jumbo Ketchup</data></li>
  <li><data value="400">Méga Jumbo Ketchup</data></li>
</ul>