Wofür werden die data-Attribute in HTML verwendet?

Die data-*-Attribute werden verwendet, um benutzerdefinierte Daten zu speichern, die keine visuelle Darstellung haben, direkt in HTML-Elementen.

Hauptzwecke der Verwendung:

• Zugriff auf Daten über JavaScript/CSS: Ermöglichen es, Daten eines Elements leicht mit JavaScript (element.dataset) abzurufen und zu manipulieren oder sie in CSS-Selektoren ([data-attribute="value"]) zu verwenden.
• Speicherung von Metainformationen: Praktisch, um zusätzliche Informationen zu speichern, die mit dem Element verbunden sind (z.B. Produkt-ID, Benutzertyp, Zustand).
• Erstellung benutzerdefinierter Komponenten: Können verwendet werden, um das Verhalten oder Eigenschaften von benutzerdefinierten Komponenten zu definieren, die mit JavaScript implementiert sind.
• Verbesserung der Semantik: Können eine gewisse Semantik hinzufügen, indem sie spezifische Daten beschreiben, die mit dem Inhalt verbunden sind.

Beispiel für die Verwendung in HTML:

<div data-product-id="123" data-category="electronics">
  Smartphone
</div>

Zugriff über JavaScript:

// Element abrufen
const productElement = document.querySelector('div');

// Zugriff auf data-Attribute
const productId = productElement.dataset.productId; // 123
const category = productElement.dataset.category;   // electronics

Verwendung in CSS:

/* Stil für Elemente mit data-category="electronics" */
[data-category="electronics"] {
  border: 1px solid blue;
}