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

Les attributs data-* sont utilisés pour stocker des données arbitraires liées à un élément HTML spécifique, sans avoir besoin d'utiliser des attributs non standard ou des propriétés DOM.

Principaux avantages :

• Sémantiquement corrects : Ils font partie de la norme HTML5 et ne violent pas la validité du document.
• Accès facile : L'accès aux données se fait via la propriété dataset en JavaScript, qui renvoie un objet avec des clés correspondant aux parties de l'attribut après data-.
• Pratique pour JavaScript/CSS : Permettent de lier certaines données aux éléments, qui peuvent ensuite être utilisées dans la logique JavaScript ou pour la stylisation en CSS (avec des sélecteurs d'attributs).
• Séparation des données et de la présentation : Aident à séparer la structure HTML des données, qui peuvent être utilisées pour le comportement ou la présentation.

Exemples d'utilisation :

• Stockage de l'ID d'une entrée dans une base de données.
• Enregistrement de paramètres pour une fenêtre contextuelle ou une boîte de dialogue modale.
• Définition de l'état d'un élément (par exemple, data-state="active").
• Transmission de petits volumes de données du backend au frontend pour une utilisation en JavaScript.

Exemple d'accès en JavaScript :

// HTML : <div id="myElement" data-id="123" data-category="electronics"></div>
const element = document.getElementById('myElement');
const id = element.dataset.id; // Accès à la valeur "123"
const category = element.dataset.category; // Accès à la valeur "electronics"