OUJOOD.COM
Définition et utilisation de l'attribut data-*
HTML – Les attributs globaux
L'attribut data-* permet de stocker des données personnalisées privées à la page ou à l'application.
Il donne la possibilité d'intégrer des attributs de données personnalisés dans tous les éléments HTML.
<element data-nom="valeur">
Exemple d'utilisation des attributs data-*
Exemple : 📋 Copier le code
<!DOCTYPE html>
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Exemple data-* attributs</title>
<style>
.produit {
border: 1px solid #ccc;
padding: 10px;
margin: 5px;
cursor: pointer;
}
.produit:hover {
background-color: #f0f0f0;
}
</style>
</head>
<body>
<div class="produit" data-id="123" data-prix="29.99" data-categorie="electronique" data-stock="15">
Smartphone XYZ
</div>
<div class="produit" data-id="456" data-prix="199.99" data-categorie="informatique" data-stock="8">
Ordinateur portable ABC
</div>
<script>
document.querySelectorAll('.produit').forEach(function(element) {
element.addEventListener('click', function() {
var id = this.dataset.id;
var prix = this.dataset.prix;
var categorie = this.dataset.categorie;
var stock = this.dataset.stock;
alert('Produit: ' + id + '\nPrix: ' + prix + '€\nCatégorie: ' + categorie + '\nStock: ' + stock);
});
});
</script>
<p><strong>Note:</strong> Cliquez sur les produits pour voir leurs données personnalisées.</p>
<p><strong>Note:</strong> Les attributs data-* sont accessibles via JavaScript avec dataset.</p>
</body>
</html>
Navigateurs pris en charge
L'attribut data-* est pris en charge dans tous les navigateurs modernes depuis HTML5.
Différences entre HTML 4.01 et HTML5
L'attribut data-* est nouveau en HTML5. Il n'existait pas en HTML 4.01.
En HTML 4.01, il n'y avait pas de mécanisme standard pour stocker des données personnalisées dans les éléments HTML.
Règles de nommage
| Règle | Description |
|---|---|
| Préfixe obligatoire | Le nom doit commencer par "data-" suivi d'au moins un caractère. |
| Caractères autorisés | Lettres minuscules, chiffres, tirets (-), points (.), deux-points (:) et underscores (_). |
| Pas de majuscules | Le nom ne doit pas contenir de lettres majuscules (A à Z). |
| Accès JavaScript | Accessible via element.dataset.nom (les tirets deviennent camelCase). |
Exemples d'utilisation courante
| Cas d'usage | Exemple |
|---|---|
| Configuration JavaScript | <div data-animation="fade" data-delay="300"> |
| Informations produit | <button data-product-id="123" data-price="29.99"> |
| Métadonnées | <article data-author="Jean" data-published="2025-01-15"> |
| Configuration CSS | <div data-theme="dark" data-size="large"> |
Accès via JavaScript
element.dataset.nom- Méthode moderne recommandéeelement.getAttribute('data-nom')- Méthode traditionnelleelement.setAttribute('data-nom', 'valeur')- Pour définir une valeur
// HTML: <div data-user-id="123" data-user-name="Jean">
var element = document.querySelector('div');
console.log(element.dataset.userId); // "123"
console.log(element.dataset.userName); // "Jean"
element.dataset.newData = "nouvelle valeur";
Bonnes pratiques
- Utilisez des noms descriptifs et cohérents pour vos attributs data-*
- Évitez de stocker des données sensibles dans les attributs data-*
- Préférez dataset pour l'accès JavaScript plutôt que getAttribute
- Les données sont visibles dans le code source HTML
- Utilisez JSON.parse() pour les données complexes stockées sous forme de chaîne
Conclusion
L'attribut data-* est un outil puissant pour stocker et exploiter des données personnalisées dans vos pages web.
Il facilite la communication entre HTML et JavaScript sans surcharger la structure DOM.
Utilisez-le avec modération et respectez les bonnes pratiques pour garantir un code maintenable et performant.