Durch CMS und den Einsatz von CSS ist der Grundstein für die Trennung von Content und Layout und die Trennung von Dokumentstruktur und Style gelegt. Die Weiterentwicklung der Technologien brachte allerlei interessante Anwendungen verschiedenster HTML-Attribute mit sich, die für bestimmte Funktionalitäten zweckentfremdet wurden. Unter diesem Umstand hatte wohl das 'rel'-Attribut am meisten zu leiden. Gerade die jQuery-Tools nutzen es gerne, um Overlays zu starten. Mit HTML5 ist der Zweckentfremdung ein Ende gesetzt.
Mit dem 'data'-Attribut steht dem Webentwickler ein Element-Identifier zur Verfügung, das für viele Anwendungsszenarien interessant ist. Über einige werde ich hier mal laut nachdenken. Aber erstmal zur Spezifikation:
Das 'data'-Attribut setzt sich aus dem Prefix 'data-' und einen frei zu vergebenen Identifier zusammen (bei der Vergabe sollte man sich an die XML-Regeln halten) .
Beispiel:
<div class="containerMessage" data-role="alertMessage">Oops, there is an error!</div>
Es wird schon beim Lesen des Quelltextes klar, wofür dieses Element verwendet werden soll, was die Wartbarkeit des Codes vereinfacht. Auch die Identifizierung über ein Javascript-Framework wie jQuery ist wesentlich eindeutiger.
(Das mobile jQuery-Framework jQuery-mobile verwendet es z.B. für die Seitenstruktur). Es lassen sich beliebig viele 'data'-Attribute in einem Element verwenden.
Beispiel:
<div class="containerMessage" data-role="alertMessage" data-priority="high" data-msg="bad error" data-sendTo="foo@bar.de">Oops, there is an error!</div>
Bei diesem Einsatzszenario ist eine weitere logische Trennung gelungen: Style- und Verhaltensstruktur. Sicher, das ließe sich natürlich auch mit einer zusätzlichen CSS-Klasse bewerkstelligen, aber die Lesbarkeit wäre nicht mehr so eindeutig. Liest man im JS-Code $('#containerMessage .alertMessage').irgendwas(); ist der Zusammenhang zwischen Element und Funktion schwammiger. Während $('div[data-role="alertMessage"]').foobar(); auch in komplexen Funktionen durchaus logisch lesbar ist.
Ein weiterer Einsatz ist temporäre Daten in diesem Attribut abzulegen, die dann am Ende der Funktion gebündelt abgeschickt abgeschickt, oder zur Weiterverarbeitung rangezogen werden können, ohne in unsichtbaren Elementen, als Cookie oder key/value-Paar im localStorage kurzfristig versteckt zu werden. Sogar Strings lassen sich dort fehlerfrei unterbringen.
Wem fallen spontan noch andere Verwendungsmöglichkeiten ein?
Immer ran an die Kommentare.