data-*

Description

Les attributs data-* sont des attributs personnalisés qui permettent de stocker des informations arbitraires directement sur un élément HTML, sans conflit avec les attributs standards. Le nom est formé du préfixe data- suivi d’un identifiant libre (en minuscules, tirets autorisés). Ces données sont accessibles en JavaScript via la propriété dataset.

Syntaxe

<article data-id="42" data-categorie="technologie" data-auteur-id="7">
  …
</article>

Exemples

Utilisation en JavaScript :

<button data-action="supprimer" data-cible="article-42" type="button">
  Supprimer
</button>

<script>
  document.querySelector('[data-action="supprimer"]')
    .addEventListener('click', (e) => {
      const { action, cible } = e.currentTarget.dataset;
      console.log(action, cible); // "supprimer" "article-42"
    });
</script>

Ciblage CSS via attributs data-* :

<span data-statut="actif">Utilisateur actif</span>

<style>
  [data-statut="actif"] { color: green; }
  [data-statut="inactif"] { color: gray; }
</style>

Notes

Conversion camelCase ↔ kebab-case : data-auteur-id est accessible en JS via element.dataset.auteurId (les tirets sont convertis en camelCase). L’inverse s’applique aussi pour l’écriture.

Pas pour les données sensibles : les attributs data-* sont visibles dans le HTML source. Ne jamais y stocker de données confidentielles (tokens, mots de passe, etc.).

Alternative aux classes utilitaires : préférer data-* pour les états comportementaux (data-ouvert, data-valide) et garder les classes pour le style.