Données HTML-* Attributs


Exemple

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

<ul>
  <li data-animal-type="bird">Owl</li>
  <li data-animal-type="fish">Salmon</li>
  <li data-animal-type="spider">Tarantula</li>
</ul>

Définition et utilisation

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

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

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

Les data-*attributs se composent de deux parties :

  1. Le nom de l'attribut ne doit pas contenir de lettres majuscules 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écédés de "data-" seront complètement ignorés par l'agent utilisateur.


Prise en charge du navigateur

Les nombres dans le tableau indiquent la première version du navigateur qui prend entièrement en charge l'attribut.

Attribute
data-* 4.0 5.5 2.0 3.1 9.6

Syntaxe

<element data-*="somevalue">

Valeurs d'attribut

Value Description
somevalue Specifies the value of the attribute (as a string)

Pages connexes

Tutoriel HTML : Attributs HTML

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