Exploitez les attributs utilisables partout et stockez vos propres données dans le HTML.
Ouvrir cette leçon dans KodokonCertains attributs fonctionnent sur n'importe quel élément : ce sont les attributs globaux. Vous utilisez déjà id et class ; ajoutez à votre boîte à outils hidden (masque l'élément), lang (indique la langue d'un passage), title (infobulle au survol) et tabindex (ordre de focus au clavier).
<p lang="en" title="Citation originale">
Stay hungry, stay foolish.
</p>
<div hidden id="cookie-banner" class="banner">
Nous utilisons des cookies.
</div>Besoin d'attacher vos propres données à un élément ? N'inventez jamais d'attribut fantaisiste : le HTML réserve pour cela les attributs data-*. Vous choisissez le nom après le tiret, en minuscules et en kebab-case. Cas d'usage typiques : un identifiant de produit, un état d'interface, une configuration de composant.
<article
class="product-card"
data-product-id="42"
data-category="books"
data-in-stock="true"
>
<h2>HTML pour les pros</h2>
</article>Côté JavaScript, ces attributs se lisent via la propriété dataset. Attention à la conversion automatique : le kebab-case du HTML devient du camelCase en JavaScript. Ainsi data-product-id se lit avec dataset.productId. Les valeurs sont toujours des chaînes de caractères, même "true" ou "42".
const card = document.querySelector(".product-card");
console.log(card.dataset.productId); // "42"
console.log(card.dataset.inStock); // "true"
card.dataset.state = "selected";