<data> : l'élément de données
Baseline
Widely available
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> relie un contenu à une version de ce contenu interprétable par un ordinateur. Si le contenu possède une composante temporelle, l'élément <time> doit être utilisé.
Exemple interactif
<p>New Products:</p>
<ul>
<li><data value="398">Mini Ketchup</data></li>
<li><data value="399">Jumbo Ketchup</data></li>
<li><data value="400">Mega Jumbo Ketchup</data></li>
</ul>
data:hover::after {
content: " (ID " attr(value) ")";
font-size: 0.7em;
}
| Catégories de contenu | Contenu de flux, contenu phrasé, contenu tangible. |
|---|---|
| Contenu autorisé | Contenu phrasé. |
| Omission de balises | Aucune, la balise d'ouverture et la balise de fermeture sont obligatoires. |
| Éléments parents autorisés | Tout élément acceptant du contenu phrasé. |
| Rôle ARIA implicite | Pas de rôle correspondant |
| Rôles ARIA autorisés | Tous les rôles. |
| Interface DOM |
HTMLDataElement
|
Attributs
Comme pour tous les autres éléments, on peut utiliser les attributs universels sur <data>.
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</p>
<ul>
<li><data value="3251546">Mini voiture</data></li>
<li><data value="5867654">Grande voiture</data></li>
<li><data value="9887635">Énorme voiture</data></li>
</ul>
Résultat
Spécifications
| Specification |
|---|
| HTML # the-data-element |
Compatibilité des navigateurs
Chargement…
Voir aussi
- L'élément
<time>.