À quoi sert-il de recommander l'utilisation des attributs data en HTML?

Les attributs data-* en HTML sont recommandés pour stocker des données personnalisées qui n’ont pas de représentation visuelle, directement à l’intérieur des éléments DOM. Cela permet :

• De stocker de petites portions de données liées à l’élément : Par exemple, l’identifiant du produit, le statut de l’élément, les paramètres du widget.
• De simplifier l’accès et la manipulation des données via JavaScript : Les données peuvent être facilement récupérées via element.dataset et modifiées.

// Récupérer des données
const monElement = document.getElementById('mon-element');
const idElement = monElement.dataset.elementId; // Récupère la valeur de l’attribut data-element-id

// Définir des données
monElement.dataset.status = 'active'; // Définit la valeur de l’attribut data-status

• Éviter les classes non sémantiques : Utiliser des classes pour stocker des données (par exemple, .status-active) peut rendre le code moins lisible et plus difficile à maintenir.
• Améliorer la performance dans certains scénarios : Accéder aux données via dataset peut être plus rapide que de parser des attributs de chaîne ou de travailler avec des éléments cachés.
• Utiliser ces données dans des sélecteurs CSS :

/* Sélectionner les éléments avec un statut spécifique */
[data-status="active"] {
  border: 1px solid green;
}

Il est important d’utiliser les attributs data-* pour des données qui n’ont pas d’autre attribut HTML sémantique approprié. Pour des données destinées à être accessibles par les moteurs de recherche ou d’autres parseurs, il faut utiliser des éléments et attributs sémantiques appropriés.