Retour au cours

Leçon 35 : Attributs de données et éléments personnalisés

La Masterclass HTML : De Zéro à Développeur Web

35. Attributs de données et éléments personnalisés

35.1 Attributs de données personnalisés (data-*)

Parfois, vous devez stocker des données supplémentaires sur des éléments HTML standards qui sont invisibles pour l'utilisateur mais accessibles pour JavaScript. Le préfixe d'attribut data-* vous permet de faire cela sans invalider votre HTML.

html

Utilisation : JavaScript peut facilement récupérer ces informations pour gérer les paniers d'achat, suivre le comportement des utilisateurs ou modifier l'état d'un composant.

35.2 Comprendre les éléments personnalisés (Un aperçu)

Bien que la création d'éléments personnalisés se fasse principalement via JavaScript (Web Components), le HTML en supporte la structure.

Les éléments personnalisés permettent aux développeurs de définir leurs propres balises (ex : <my-alert> ou <user-card>), favorisant la réutilisabilité et un code propre. Ils doivent obligatoirement contenir un trait d'union dans leur nom.

html

C'est ici que commence la magie des Web Components, faisant le pont entre le HTML et le JavaScript avancé.