Attributs de Données Personnalisés

HTML te permet d'ajouter des attributs personnalisés à n'importe quel élément en les préfixant avec data-. On les appelle attributs de données et ils fournissent un moyen standard d'intégrer des informations supplémentaires dans ton balisage.

<button data-action="delete" data-item-id="42">Delete</button>

Les attributs de données :

• Sont complètement ignorés par le moteur de rendu du navigateur.
• N'affectent pas la sémantique ou l'accessibilité (sauf si lus par JavaScript).
• Sont du HTML valide — le pattern data-* fait partie de la spécification.
• Peuvent stocker n'importe quelle valeur de type chaîne de caractères.

Les noms d'attributs de données doivent suivre ces règles :

1. Commencer par data-.
2. Contenir uniquement des lettres minuscules, des chiffres, des tirets, des points, des deux-points et des underscores.
3. Pas de lettres majuscules.

Patterns de nommage courants

Garde les noms descriptifs mais concis. Utilise des tirets pour séparer les mots : data-user-role, pas data-userrole.

JavaScript fournit la propriété dataset sur chaque élément pour lire et écrire les attributs de données. Les noms avec tirets sont convertis en camelCase :

<div id="user" data-user-name="Alice" data-role="admin" data-login-count="5"></div>

const el = document.getElementById('user');

// Lecture
console.log(el.dataset.userName);   // "Alice"
console.log(el.dataset.role);        // "admin"
console.log(el.dataset.loginCount);  // "5" (toujours une chaîne)

// Écriture
el.dataset.status = 'online';  // ajoute data-status="online"

// Suppression
delete el.dataset.role;  // supprime l'attribut data-role

Note que les valeurs de dataset sont toujours des chaînes de caractères. Parse-les avec parseInt(), JSON.parse(), etc. selon les besoins.

Bons cas d'usage

• Gestion d'état de l'interface : data-active="true", data-tab="settings"
• Hooks JavaScript : data-action="save" pour la délégation d'événements
• Ciblage CSS : [data-theme="dark"] { ... }
• Filtrage/tri : data-price="29.99", data-category="books"

Quand NE PAS utiliser les attributs de données

• Informations d'accessibilité — Utilise les attributs ARIA (aria-label, aria-expanded, etc.) à la place.
• Hooks de style uniquement — Préfère les classes CSS. Les attributs de données doivent porter des données, pas juste servir de hooks de style.
• Grandes quantités de données — Pour des données complexes, stocke-les dans des objets JavaScript et référence les éléments par ID.
• Données sensibles — Les attributs de données sont visibles dans le DOM. Ne stocke jamais de mots de passe, tokens ou informations personnelles.