À retenir
- Ils commencent obligatoirement par le préfixe data-.
- Ils servent à stocker des informations personnalisées non prévues par les standards HTML.
- Ils facilitent la communication entre le contenu (HTML), le style (CSS) et l'interactivité (JavaScript).
Un attribut de données est une étiquette personnalisée que l'on ajoute à un élément HTML pour stocker des informations supplémentaires invisibles pour l'utilisateur, mais utiles pour le fonctionnement interne du site. C'est comme coller un petit post-it discret derrière un objet pour noter une référence ou une instruction spécifique que seul le personnel du magasin doit lire.
Étymologie
Le terme vient du latin attributum (« ce qui est attribué »). Dans le web, il désigne spécifiquement le préfixe data- introduit avec la norme HTML5 pour permettre aux développeurs de créer leurs propres propriétés sans dépendre uniquement des identifiants (ID) ou des classes CSS.
Exemples d'usage
data-id-produit="12345": pour identifier précisément un article dans une boutique en ligne.data-langue="fr": pour indiquer au code JavaScript la langue d'un bloc de texte spécifique.data-statut="en-attente": pour changer l'apparence d'un élément selon son état actuel.
Cas d'usage
On les utilise principalement en développement web (Front-end). Ils permettent au JavaScript de récupérer facilement des données pour effectuer des calculs ou des animations, et au CSS de cibler des éléments selon des critères très précis (par exemple, colorer différemment tous les éléments ayant un attribut data-urgent="true").
Bonnes pratiques
Évitez de stocker des données sensibles (comme des mots de passe) dans ces attributs, car n'importe quel visiteur peut les voir en affichant le code source de la page. Utilisez toujours des noms en minuscules et séparez les mots par des tirets pour une meilleure compatibilité.
Synonymes
Antonymes
Conseil
Si vous débutez, utilisez-les pour éviter de surcharger vos classes CSS avec des noms complexes. C'est un excellent moyen de garder votre code organisé en séparant ce qui relève de l'apparence (class) et ce qui relève de la donnée (data-).
Questions fréquentes
Quelle est la différence avec une classe CSS ?
Une classe sert principalement au style graphique, tandis qu'un attribut de données sert à stocker de l'information brute exploitable par du code.
Y a-t-il une limite de stockage ?
Techniquement non, mais il est déconseillé d'y mettre des textes très longs pour ne pas alourdir le chargement de la page.
Comment le JavaScript les lit-il ?
Grâce à la propriété 'dataset' qui transforme par exemple data-user-name en dataset.userName.