HTML Academy · Leçon

Attributs de données personnalisés data-*

Stockez des données personnalisées directement sur les éléments avec les attributs data-*.

Attributs de données personnalisés data-* est une leçon HTML Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage HTML Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours HTML Academy comprend 4 leçons au total.

Que sont les attributs data-* ?

Les attributs de données personnalisés permettent de stocker des informations supplémentaires directement sur les éléments HTML :

<button data-user-id="42" data-action="delete">Delete User</button>
<li data-category="frontend" data-level="beginner">HTML</li>

<!-- Format: data-[name]="value" -->
<!-- Any alphanumeric name after data- is valid -->
<!-- Values are always strings -->

Pourquoi data-* existe

Avant data-*, les développeurs stockaient les données supplémentaires dans :

Des champs masqués (peu pratiques)
Des noms de classes CSS (fragiles)
Des attributs non standard comme rel ou title (HTML non valide)

HTML5 a officialisé data-* comme méthode officielle pour intégrer des données personnalisées sans modifier la sémantique ni la présentation.

Règles de nommage

Règles de nommage des attributs data-* :

Doit commencer par data-
Le nom peut contenir des lettres minuscules, des chiffres, des traits d’union, des traits de soulignement et des points
Aucune lettre majuscule dans le nom (la spécification HTML les convertit en minuscules)
Le nom ne peut pas commencer par xml

<div data-user-id="1">OK</div>
<div data-product-category="tools">OK</div>
<!-- <div data-XML-thing="1">BAD: starts with xml -->
<!-- <div data-MyProp="1">BAD: uppercase in name -->

Lire data-* dans JavaScript

Accédez aux données personnalisées via la propriété dataset :

<button id="btn"
  data-user-id="42"
  data-action="delete"
  data-confirm-message="Are you sure?"
>
  Delete
</button>

<script>
const btn = document.getElementById('btn');
console.log(btn.dataset.userId);          // '42'
console.log(btn.dataset.action);          // 'delete'
console.log(btn.dataset.confirmMessage);  // 'Are you sure?'
// Note: data-user-id → dataset.userId (camelCase conversion)
</script>

Écrire data-* avec dataset

Définissez et supprimez des attributs de données via dataset :

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

// Set:
card.dataset.status = 'active';
// Now: <div class="card" data-status="active">

// Delete:
delete card.dataset.status;
// Now: data-status is removed

// Alternatively with setAttribute:
card.setAttribute('data-status', 'inactive');
card.removeAttribute('data-status');

Conversion des traits d’union en camelCase

L’API dataset convertit les noms séparés par des traits d’union en camelCase :

<!-- HTML attribute         JavaScript dataset property -->
data-user-id           →   dataset.userId
data-product-category  →   dataset.productCategory
data-max-retries       →   dataset.maxRetries
data-is-active         →   dataset.isActive

Sélecteurs d’attributs CSS

Utilisez les attributs de données dans les sélecteurs CSS :

[data-status="active"] {
  color: green;
}

[data-status="inactive"] {
  color: gray;
  text-decoration: line-through;
}

/* Present but any value: */
[data-featured] {
  border: 2px solid gold;
}

Modèle d’infobulle

Créez des infobulles entièrement en CSS avec les attributs de données :

<span data-tooltip="This is a tooltip">Hover me</span>

/* CSS: */
/*
[data-tooltip] {
  position: relative;
}
[data-tooltip]::after {
  content: attr(data-tooltip);  /* attr() reads the attribute value */
  position: absolute;
  background: #333;
  color: white;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
[data-tooltip]:hover::after { opacity: 1; }
*/

Modèle de suivi d’état

Suivez l’état d’un composant avec des attributs de données :

<button data-state="off" id="toggle">Toggle</button>

<script>
document.getElementById('toggle').addEventListener('click', function() {
  const state = this.dataset.state;
  this.dataset.state = state === 'off' ? 'on' : 'off';
  this.textContent = this.dataset.state === 'on' ? 'Active' : 'Toggle';
});
</script>

/* CSS: */
/* [data-state="on"] { background: green; color: white; } */

data-* ou variables JavaScript

Quand utiliser data-* plutôt que de stocker les données dans JavaScript :

Utilisez data-* pour les valeurs qui correspondent directement à un élément DOM et qui peuvent être lues par CSS
Utilisez des variables ou des objets JavaScript pour les structures de données complexes qui ne sont pas liées à des éléments précis
Ne stockez pas de données volumineuses ou sensibles dans data-* — elles sont visibles dans DevTools

data-* n’est pas destiné à la présentation

Erreurs courantes à éviter :

<!-- BAD: storing presentation data in data-* -->
<div data-color="red" data-font-size="18">Text</div>
<!-- Use CSS classes instead: -->
<div class="text-danger text-lg">Text</div>

<!-- BAD: storing sensitive data -->
<div data-api-key="sk-123...">Content</div>
<!-- NEVER store secrets in HTML attributes -->

Vérification rapide

Comment l’API dataset accède-t-elle à un attribut data-product-id ?

Récapitulatif : attributs data-*

Points essentiels des attributs de données personnalisés :

data-name="value" — stocker des métadonnées personnalisées sur les éléments
Accès via element.dataset.camelCase
Les traits d’union sont convertis en camelCase dans l’API dataset
Utiliser dans CSS avec les sélecteurs [data-name="value"]
Ne jamais stocker de données sensibles (clés, mots de passe) dans les attributs de données

Questions Fréquemment Posées

La leçon « Attributs de données personnalisés data-* » est-elle gratuite ?

Oui — le texte complet de « Attributs de données personnalisés data-* » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours HTML Academy, passe à CoddyKit PRO. Le cours HTML Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Attributs de données personnalisés data-* » ?

Stockez des données personnalisées directement sur les éléments avec les attributs data-*. Tu pratiques HTML Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer HTML Academy ?

Aucune expérience préalable n'est requise. HTML Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.

Combien de temps prend la leçon « Attributs de données personnalisés data-* » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon HTML Academy ?

Oui. Chaque leçon HTML Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

id, class, style et title
L’attribut hidden
tabindex et accesskey
Attributs de données personnalisés data-*

← Retour à HTML Academy