# Attribut data-*

> Attribut HTML personnalisé, préfixé par data-, qui stocke une information propre à un élément pour que JavaScript ou CSS puisse la lire sans polluer la structure officielle du langage.

- Auteur : Clément Hadrot
- Publié le : 2026-09-25
- Mis à jour le : 2026-09-25
- URL : https://wpmoderne.dev.wordpress-developpement.fr/lexique/attribut-data/

Détourner un attribut existant pour y glisser une information qui n'a rien à voir avec sa fonction d'origine finit toujours par créer des surprises. Ce préfixe réservé par la spécification HTML offre à la place un espace de stockage officiellement toléré, sans jamais entrer en conflit avec un attribut standard actuel ou futur.

## Lecture côté JavaScript

Chaque attribut préfixé devient accessible via la propriété `dataset` de l'élément, avec une conversion automatique du tiret vers la casse mixte :

```
<button data-produit-id="482" data-en-stock="true">Ajouter au panier</button>

<script>
const bouton = document.querySelector( 'button' );
console.log( bouton.dataset.produitId ); // "482"
</script>
```

Dans un thème WordPress, ce mécanisme sert souvent à transmettre un identifiant d'article ou un réglage venant de PHP jusqu'à un script JavaScript, sans passer par une requête supplémentaire.

## Bon à savoir

- Toutes les valeurs sont lues comme des chaînes de caractères, y compris `data-en-stock="true"` : une conversion explicite reste nécessaire côté script si un booléen ou un nombre est attendu.
- Ces attributs sont aussi ciblables directement en CSS avec un sélecteur d'attribut, par exemple `[data-en-stock="false"] { opacity: 0.5; }`.
- Contrairement à un identifiant ou une classe, un attribut préfixé n'a aucune incidence sur le style par défaut d'un élément : il ne prend effet que si un sélecteur ou un script vient explicitement le lire.
- La méthode `setAttribute()` reste une alternative possible à `dataset` pour lire ou écrire ces attributs, notamment quand le nom contient des caractères que la conversion automatique en casse mixte gérerait mal.