data-Attribute sind eigene Attribute mit einem festen Präfix, mit denen sich Angaben am Element unterbringen lassen, die HTML selbst nicht vorsieht.
- data-Attribute
Attribute mit dem Präfix data-, die für eigene Angaben am Element vorgesehen sind.
Beispiel: „Ein data-Attribut kollidiert nie mit einem künftigen Standardnamen.“
Wofür sie gut sind
<button data-aktion="aufklappen" data-ziel="#details">Mehr</button>Angaben, die der Code braucht und die nicht in den Text gehören: welche Aktion ein Knopf auslöst, welche Kennung ein Eintrag hat, in welchem Zustand ein Bereich ist. In CSS lassen sie sich über einen Attributselektor ansprechen.
Was nicht hineingehört
Inhalte, die der Besucher sehen soll; die gehören in den Text. Und nichts Vertrauliches: Ein data-Attribut steht im Quelltext und ist für jeden lesbar.