data-type ..wo verwenden/ für was ?

Attribute die mit 'data-' anfangen werden vom Browser ignoriert und spielen (meist) für Javascripts eine Rolle. Ohne das dazugehörige Javascript ist es unmöglich zu sagen wofür es verwendet wird, bzw. was reingehört.

Diese sogenannten "Custom data attributes" spielen meist nur für die Applikationen/Anwendungen auf deiner Website eine Rolle.
Sie sind im Grunde dafür gedacht, gewisse Informationen, die sich nicht durch Tags ausdrücken lassen zu speichern um eine bessere
Semantik und einen schnelleren Zugriff darauf zu erhalten. Sie sollen laut Spezifikation von Programmen und Scripts,
die nicht zum eigenen Projekt/eignen Anwendung gehören auch nicht genutzt werden. Ist also mehr eine interne
Sache um mit Programmiersprachen dann dadurch einige Features anzubieten(Sortieren nach Zeit, Länge, Dauer etc...).

Data? Ein wunderbares Zeug wie ich finde

Weil ich mit der Formatierung des input-range Elementes nicht zufrieden war habe ich so etwas kurzerhand selbst gebastelt, hierzu habe ich sehr gerne auf data zurückgegriffen:

<div id="slideBar">
    <div id="slider" data-min="0" data-max="360" data-x-position="0"></div>
</div>

Hierbei berechnet sich der data-x-position Wert aus der Position des #slider in Relation zur Breite des #slideBar. Ein wunderbarer Zwischenspeicher, nun kann ich jederzeit auf diesen Wert zurückgreifen ohne ihn per JavaScript namespace-übergreifend abzuspeichern, fast schon schummeln.

Viele JavaScript Frameworks und API's bieten den Entwicklern damit auch einfache Möglichkeiten Werte zu übergeben ohne Script-Quellcode zu ändern oder den Code invalide zu machen.

Zitat von Basiii

HTML

[...]
    <div.... data-min=... data-max=... data-x-position=....>
[...]

Du kannst da alphanummerisch machen was du möchtest. "data-" ist nur ein Prefix.

data-irgendwas
data-irgendwas-anderes
data-brauchst-du-noch-mehr-beispiele