À quoi servent les attributs data en HTML?

Les attributs data-* sont utilisés pour stocker des données personnalisées qui n'ont pas de représentation visuelle, directement dans les éléments HTML.

Objectifs principaux d'utilisation :

• Accès aux données via JavaScript/CSS : Permettent de récupérer et de manipuler facilement les données de l'élément via JavaScript (element.dataset) ou de les utiliser dans des sélecteurs CSS ([data-attribute="value"]).
• Stockage de métadonnées : Pratique pour stocker des informations supplémentaires liées à l'élément (par exemple, ID du produit, type d'utilisateur, état).
• Création de composants personnalisés : Peuvent être utilisés pour définir le comportement ou les propriétés de composants personnalisés, implémentés avec JavaScript.
• Amélioration de la sémantique : Peuvent ajouter un certain niveau de sémantique, décrivant des données spécifiques liées au contenu.

Exemple d'utilisation en HTML :

<div data-product-id="123" data-category="electronics">
  Smartphone
</div>

Accès via JavaScript :

// Obtenir l'élément
const productElement = document.querySelector('div');

// Accès aux attributs data
const productId = productElement.dataset.productId; // 123
const category = productElement.dataset.category;   // electronics

Utilisation en CSS :

/* Style pour les éléments avec data-category="electronics" */
[data-category="electronics"] {
  border: 1px solid blue;
}