HTML5: Eigene data-Attribute verwenden (data-*)

Ein neues Feature von HTML5 sind frei wählbare data-Attribute für HTML-Elemente, die sogenannten „Custom Data Attributes”.

Die Idee ist dahinter ganz einfach: Man möchte eigene Daten an einem HTML-Element abspeichern, für die es kein vorgefertigtes Attribut gibt und die auch nicht direkt im Frontend zu sehen sein sollen. Insgesamt ein sehr nützliches Features, das im Folgenden vorgestellt wird.

data-* Attribute

Man kann in einem HTML-Element ein eigenes Attribut definieren, indem man mit dem vorgegebenen Präfix data- beginnt und anschließend mit einer frei wählbaren Bezeichnung endet (z.B. data-release-year). Im Folgenden ein Beispiel, das einige Beatles-Alben mit dem Erscheinungsjahr versieht. Dabei handelt es sich um validen HTML5-Code (und dies ganz ohne eigenen Namespaces oder Doctype).

[html]

• Yellow Submarine
• Abbey Road
• Let It Be

[/html]

Man kann beliebig viele dieser data-*-Attribute „erfinden” und verwenden.

Nur zur eigenen Verwendung

Die Custom-Data-Attributes sind nur dazu gedacht, von den Skripten der eigenen Website genutzt zu werden. Sie sollen jedoch nicht dazu dienen, dass externe Skripte, Suchmaschinen, etc. diese Daten verwenden. W3C schreibt dazu:

These attributes are not intended for use by software that is independent of the site that uses the attributes.

Auslesen der Custom Data Attributes

Das Hinzufügen der Daten im HTML-Code ist selbstverständlich nur der erste Schritt, denn im zweiten Schritt müssen diese Informationen auch wieder ausgelesen werden. Hierzu greift man mit JavaScript einfach auf das dataset zu, dass alle eigenen data-Attribute enthält.

[js]
var discs = document.getElementsByTagName(‚li‘);
console.log ( discs[0].dataset[‚releaseYear‘] );
[/js]

Zu beachten ist an dieser Stelle, dass aus der Schreibweise mit Bindestrichen im HTML-Code eine CamelCase-Schreibweise in JavaScript wurde.

[ad]

Code-Beispiel

Hier ein kurzes Beispiel mit den oben bereits gezeigten Beatles-Alben. Ein Klick auf die Buttons filtert die angezeigten Alben nach dem Erscheinungsjahr, die aus dem Attribut data-release-year stammen.

Link: Embedding custom non-visible data with the data-* attributes (W3C)