HTML data-* Attributs


Exemple

Utilisez l'attribut data-* pour intégrer des données personnalisées :

<ul>
<li data-animal-type="bird">Hibou</li>
<li data-animal-type="fish">Saumon</li>
<li data-animal-type="spider">Tarantule</li>
</ul>
Essayez-le vous-même »

Définition et utilisation

Les data-* attributs sont utilisés pour stocker des données personnalisées qui sont privées à la page ou à l'application.

Les data-* attributs nous permettent d'intégrer des attributs de données personnalisées sur tous les éléments HTML.

Les données (personnalisées) stockées peuvent ensuite être utilisées dans le JavaScript de la page pour créer une expérience utilisateur plus engageante (sans aucun appel Ajax ni requêtes de base de données côté serveur).

Les data-* attributs se composent de deux parties :

  1. Le nom de l'attribut ne doit contenir aucune lettre majuscule et doit comporter au moins un caractère après le préfixe "data-"
  2. La valeur de l'attribut peut être n'importe quelle chaîne

Remarque : Les attributs personnalisés préfixés par "data-" seront complètement ignorés par l'agent utilisateur.

Support des navigateurs

Les chiffres dans le tableau spécifient la première version du navigateur qui prend entièrement en charge l'attribut.

Attribut
data-* 4.0 5.5 2.0 3.1 9.6

Syntaxe

< élément data-*=" somevalue ">

Valeurs des attributs

Valeur Description
somevalue Spécifie la valeur de l'attribut (sous forme de chaîne)

Pages associées

Tutoriel HTML : Attributs HTML

Référence DOM HTML : Méthode HTML DOM getAttribute()