<data>
Relie un contenu lisible à une valeur pour les machines, par exemple le nom d’un produit à son code.
- Affichage
- inline
- Balise fermante
- Obligatoire
- Contenu autorisé
- Contenu phrasant
Exemple
#<p>Nos formations :</p>
<ul>
<li><data value="HTML-101">Formation HTML et CSS pour débutants</data></li>
<li><data value="JS-201">JavaScript pour débutants</data></li>
<li><data value="PY-101">Python depuis zéro</data></li>
</ul>Définition et utilisation
#L’élément <data> relie un contenu visible pour les humains à une valeur pour les programmes, enregistrée dans l’attribut value. L’utilisateur voit « Formation JavaScript », et un script lit l’identifiant JS-201. L’utilisateur voit « 1 299,00 € », et le script reçoit le nombre 1299.
Une telle valeur est utile pour trier, filtrer et calculer : pas besoin d’extraire un nombre d’un texte plein d’espaces, de virgules et de symboles monétaires. En JavaScript, vous la lisez via la propriété value de l’élément.
Pour les dates et les heures, il existe un élément à part, <time>. En revanche, si la valeur n’est utile qu’à vos propres scripts et n’est pas liée à un fragment précis de contenu, les attributs data-* peuvent être plus pratiques.
Syntaxe
#<data value="valeur-pour-les-machines">contenu pour les humains</data>Attributs
#texte ou nombre
La valeur pour les machines, obligatoire. Écrivez les nombres avec un point comme séparateur décimal et sans espace, quelle que soit leur apparence dans le contenu visible.
L’élément accepte aussi tous les attributs globaux, comme class, id, style ou hidden.
Attributs en pratique
#value
texte ou nombreLa valeur pour les machines, obligatoire. Écrivez les nombres avec un point comme séparateur décimal et sans espace, quelle que soit leur apparence dans le contenu visible.
<p>Note de la formation : <data value="4.5">★★★★½</data></p>Plus d’exemples
#<ul id="cart">
<li>Formation HTML et CSS : <data value="149">149,00 €</data></li>
<li>Formation JavaScript : <data value="199.5">199,50 €</data></li>
</ul>
<p>Total : <strong id="total"></strong></p>
<script>
let sum = 0;
document.querySelectorAll('#cart data').forEach((item) => {
sum += Number(item.value);
});
document.getElementById('total').textContent = sum.toFixed(2).replace('.', ',') + ' €';
</script>Le script n’a pas besoin d’analyser le texte « 199,50 € ». Il prend des nombres tout prêts dans l’attribut value et écrit la somme, 348,50 €.
Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Écrivez les dates et les heures dans
<time>, pas dans<data>. - Gardez un seul format de valeur dans tout le site, par exemple des prix toujours en euros avec un point décimal.
- Si les données ne sont utiles qu’aux scripts, envisagez les attributs
data-*.
Entrées associées
#- <time>Une date, une heure ou une durée écrites de façon lisible pour les humains et, en même temps, compréhensible pour les machines.
- <span>Un conteneur en ligne générique sans signification, pour styliser un fragment de texte.
- <abbr>Une abréviation ou un acronyme, avec un développement facultatif dans l’attribut title.
- <meter>Une jauge pour une valeur dans une plage connue : espace utilisé, résultat d’un test, niveau de batterie.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.