Utiliser les attributs data-* pour des interactions avancées

Le HTML5 a introduit une fonctionnalité puissante permettant aux développeurs de stocker des informations personnalisées directement dans les balises : les attributs de données. Savoir utiliser les attributs data-* pour des interactions avancées transforme la manière dont vous liez votre structure HTML à vos scripts JavaScript et vos styles CSS.

Pourquoi utiliser les attributs personnalisés ?

Avant l’arrivée du HTML5, les développeurs devaient souvent détourner l’usage d’attributs existants pour stocker des métadonnées liées à un élément. Cela rendait le code sémantiquement incorrect et difficile à maintenir.

Les attributs personnalisés résolvent ce problème en offrant un espace dédié au stockage de données côté client. Ils sont parfaits pour conserver des identifiants de base de données, des états d’interface ou des paramètres de configuration directement accessibles par le navigateur.

Les règles de syntaxe en HTML

La création de ces attributs obéit à des règles strictes. Le nom de l’attribut doit obligatoirement commencer par data-, suivi d’au moins un caractère en minuscules. Les espaces ne sont pas autorisés.

<article data-id="42" data-category="tutoriel" data-read-time="5">
    <h3>Titre de l'article</h3>
    </article>

Styliser les éléments via CSS

L’un des grands avantages de cette technique est la possibilité de cibler ces attributs en CSS. Vous pouvez modifier l’apparence d’un élément selon la valeur de sa donnée, ou même afficher cette valeur grâce à la fonction attr().

/* Ciblage par attribut */

article[data-category="tutoriel"] {
    border-left: 4px solid blue;
    }
/* Affichage du contenu de l'attribut */

article::after {
    content: "Temps de lecture : " attr(data-read-time) " min";
    font-size: 0.8rem;
    color: gray;
    }

Manipuler les données en JavaScript avec dataset

C’est en JavaScript que l’on exploite le plein potentiel de ces attributs. L’API DOM propose la propriété dataset, qui permet de lire et d’écrire ces valeurs de manière très intuitive.

Attention à la conversion des noms : un attribut nommé data-read-time en HTML deviendra readTime (en camelCase) dans l’objet dataset.

const article = document.querySelector('article');

// Lecture des données
const id = article.dataset.id;
console.log(id); // Affiche "42"

// Modification et ajout de données

article.dataset.readTime = "10";
article.dataset.newStatus = "published";

Cas pratique : Un système de filtrage

Voici comment utiliser les attributs data-* pour des interactions avancées dans le cadre d’un système de filtrage de galerie d’images.

<div class="filters">
    <button data-filter="all">Tout</button>
        <button data-filter="nature">Nature</button>
            <button data-filter="tech">Technologie</button>
            </div>
            
            <div class="gallery">
                <img src="foret.jpg" data-category="nature" alt="Forêt">
                    <img src="ordi.jpg" data-category="tech" alt="Ordinateur">
                    </div>

const buttons = document.querySelectorAll('button[data-filter]');
const images = document.querySelectorAll('.gallery img');

buttons.forEach(button => {
    button.addEventListener('click', () => {
            const filter = button.dataset.filter;                
            images.forEach(img => {
            if (filter === 'all' || img.dataset.category === filter) {
                            img.style.display = 'block';
                            } else {
                            img.style.display = 'none';
                             }
                         });
              });
                });

Conclusion

Les attributs personnalisés constituent un pont élégant et performant entre votre structure HTML, votre design CSS et votre logique JavaScript. Que ce soit pour gérer des états, stocker des identifiants ou créer des composants dynamiques, utiliser les attributs data-* pour des interactions avancées vous permet d’écrire un code plus propre, plus modulaire et plus facile à maintenir.