Nutze die Attribute, die überall funktionieren, und speichere deine eigenen Daten im HTML.
Diese Lektion in Kodokon öffnenManche Attribute funktionieren an jedem Element: Das sind die globalen Attribute. id und class nutzt du bereits; ergänze deinen Werkzeugkasten um hidden (blendet das Element aus), lang (gibt die Sprache eines Abschnitts an), title (Tooltip beim Überfahren) und tabindex (Reihenfolge des Tastaturfokus).
<p lang="en" title="Original quote">
Stay hungry, stay foolish.
</p>
<div hidden id="cookie-banner" class="banner">
We use cookies.
</div>Willst du einem Element eigene Daten anhängen? Erfinde nie ein ausgedachtes Attribut: HTML reserviert genau dafür die data-*-Attribute. Den Namen nach dem Bindestrich wählst du selbst, in kleingeschriebenem kebab-case. Typische Anwendungsfälle: eine Produktkennung, ein UI-Zustand, eine Komponentenkonfiguration.
<article
class="product-card"
data-product-id="42"
data-category="books"
data-in-stock="true"
>
<h2>HTML for pros</h2>
</article>Auf der JavaScript-Seite werden diese Attribute über die dataset-Eigenschaft gelesen. Achte auf die automatische Umwandlung: Das HTML-kebab-case wird in JavaScript zu camelCase. data-product-id liest man also mit dataset.productId. Die Werte sind immer Strings, sogar "true" oder "42".
const card = document.querySelector(".product-card");
console.log(card.dataset.productId); // "42"
console.log(card.dataset.inStock); // "true"
card.dataset.state = "selected";