HTML Academy · Leçon

Syntaxe et conventions de nommage de `data-*`

Comprenez les noms valides des attributs `data-*` et leur rôle.

Leçon 1 sur 413 étapes

Syntaxe et conventions de nommage de `data-*` est une leçon HTML Academy gratuite sur CoddyKit. Ceci est la leçon 1 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.

Révision : attributs data-*

Les attributs de données (data-*) stockent des informations personnalisées sur les éléments HTML :

<div data-user-id="42" data-role="admin" data-active="true">
  User Card
</div>

Règles de nommage valides

Exigences de nommage des attributs data-* :

Doivent commencer par data-
Doivent être suivis d’au moins un caractère
Peuvent contenir uniquement des lettres minuscules, des chiffres, des traits d’union, des traits de soulignement, des points et des deux-points
Ne doivent pas contenir de lettres majuscules (l’analyseur HTML convertit les attributs en minuscules)
Ne doivent pas contenir d’espaces

Conventions de nommage

Conventions de nommage de la communauté :

<!-- BEM-style: module__element--modifier -->
data-card="profile"
data-card-id="42"
data-card-state="expanded"

<!-- Descriptive: domain-concept -->
data-product-id="SKU-123"
data-analytics-event="click-cta"
data-feature-flag="dark-mode"

Plusieurs attributs de données

Un élément peut avoir autant d’attributs de données que nécessaire :

<button
  type="button"
  data-action="delete"
  data-target-id="user-42"
  data-confirm="true"
  data-confirm-message="Delete this user permanently?"
>Delete</button>

Les valeurs sont toujours des chaînes

Les valeurs des attributs de données sont toujours des chaînes — utilisez parse dans JavaScript pour les analyser :

const el = document.querySelector('[data-user-id]');

console.log(el.dataset.userId);              // '42' (string)
console.log(typeof el.dataset.userId);       // 'string'

// Parse to number:
const id = parseInt(el.dataset.userId, 10);   // 42 (number)

// Parse to boolean:
const active = el.dataset.active === 'true'; // true (boolean)

// Parse to JSON:
const config = JSON.parse(el.dataset.config); // object

Stocker du JSON dans data-*

Stockez les données complexes sous forme de chaînes JSON :

<div
  data-config='{"theme":"dark","locale":"en-US","pageSize":20}'
  id="app"
></div>

<script>
const el = document.getElementById('app');
const config = JSON.parse(el.dataset.config);
console.log(config.theme);    // 'dark'
console.log(config.pageSize); // 20
</script>

data-* ou éléments personnalisés

Quand choisir data-*, des éléments personnalisés ou des objets JavaScript :

data-* — métadonnées propres à un élément, visibles dans le HTML et accessibles depuis le CSS
Éléments personnalisés — composants complexes et réutilisables au comportement encapsulé
Map/WeakMap JavaScript — données qui n’ont pas besoin d’être présentes dans le HTML ; données volumineuses ou complexes

Utilisation de data-* avec les cadres applicatifs

Utilisations courantes des attributs de données dans les cadres applicatifs :

<!-- Bootstrap: target collapsible elements -->
<button data-bs-toggle="collapse" data-bs-target="#menu">
  Toggle
</button>

<!-- Alpine.js: component data -->
<div x-data="{ open: false }">

<!-- Stimulus: controller identification -->
<div data-controller="menu" data-menu-open-value="false">

<!-- Testing libraries: stable selectors -->
<button data-testid="submit-btn">Submit</button>

Accessibilité et data-*

Les attributs de données ne sont pas annoncés par les lecteurs d’écran — ne les utilisez pas pour les informations d’accessibilité :

<!-- BAD: accessibility info in data-* -->
<button data-label="Close dialog">×</button>
<!-- Screen reader does NOT read data-label -->

<!-- GOOD: use aria-label for accessibility -->
<button aria-label="Close dialog">×</button>

Considérations relatives aux performances

Les attributs data-* ont un impact négligeable sur les performances :

La lecture de dataset est rapide (O(1))
Une utilisation intensive de data-* sur des milliers d’éléments ne pose pas de problème
Stocker de gros blocs de données (images, JSON volumineux) dans data-* est inefficace
Utilisez WeakMap pour stocker les gros objets JS associés aux éléments du DOM

Résumé : bonnes pratiques pour data-*

Bonnes pratiques pour data-* :

Utilisez des noms en minuscules séparés par des traits d’union
Les valeurs sont toujours des chaînes — analysez-les selon vos besoins
Pour le JSON : JSON.stringify / JSON.parse
Utilisez-les pour les métadonnées dont le CSS ou JavaScript a besoin
Ils ne remplacent pas les attributs ARIA
N’y stockez pas de secrets (ils sont visibles dans DevTools)

Vérification rapide

Quel type dataset renvoie-t-il toujours pour les valeurs d’attributs ?

Réponds-y dans la leçon interactive

Récapitulatif : syntaxe de data-*

Principes essentiels du nommage de data-* :

Format : data-[lowercase-name]="value"
Accès : element.dataset.camelCaseName
Toutes les valeurs sont des chaînes — analysez-les explicitement
Stockez les données complexes au format JSON
Minuscules uniquement, sans majuscules ni espaces dans le nom de l’attribut

Gratuit pour commencer

Apprends HTML avec un tuteur IA — gratuit

Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.

Cours: 40
Leçons: 159

Commencer gratuitement Voir le cours complet

Questions Fréquemment Posées

La leçon « Syntaxe et conventions de nommage de `data-*` » est-elle gratuite ?

Oui — le texte complet de « Syntaxe et conventions de nommage de `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 « Syntaxe et conventions de nommage de `data-*` » ?

Comprenez les noms valides des attributs `data-*` et leur rôle. 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 1 sur 4.

Combien de temps prend la leçon « Syntaxe et conventions de nommage de `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

Syntaxe et conventions de nommage de `data-*`
Accéder à `data-*` avec `dataset` en JavaScript
Utiliser `data-*` avec les sélecteurs d’attributs CSS
Modèles concrets : info-bulles et suivi d’état

← Retour à HTML Academy