In HTML5 können Sie das `` Tag verwenden, um maschinenlesbare Daten zu speichern, die Ihrer Hauptinhaltsstruktur hinzugefügt werden können. Es hilft, unsichtbare Informationen in Schlüssel-Werte-Paaren zu speichern, welche dann im CSS oder JavaScript genutzt werden können.
Hier ist ein einfaches Beispiel dafür:
```html
Der Produktname
```
In diesem Beispiel wird die Produkt-ID, ein maschinenlesbarer Wert, im data-Tag gespeichert. Obwohl der Wert “12345” für Menschen in einem Webbrowser unsichtbar ist, kann er von der Maschine gelesen und für verschiedene Aufgaben verwendet werden.
Die Nutzung des data-* Attributs gibt Ihnen die Möglichkeit, eigene Attribute zu erstellen. Zum Beispiel:
```html
In diesem Beispiel haben wir drei eigene Attribute erstellt: data-id, data-name und data-price. Diese können dann zum Beispiel über JavaScript aufgerufen werden:
```javascript
var produkt = document.getElementById(‘Produkt’);
// Speichere Ergebisse in Variablen
var produktID = produkt.dataset.id; // 12345
var produktName = produkt.dataset.name; // Produktname
var produktPrice = produkt.dataset.price; // 99.99
```
Das data-* Attribut sollte genutzt werden, wenn kein passendes HTML5-Element oder -Attribut vorhanden ist. Bitte beachten Sie, dass das data-* Attribut nicht dazu gedacht ist, private Daten zu speichern.
