HTML data: Maschinenlesbare Informationen

data-Element

Die Daten für den Leser können z.B. in anderen Maßeinheiten geschrieben werden, während die maschinenlesbaren Daten z.B. für die Sortierung und Berechnungen verwendet werden können. Die maschinenlesbare Codierung wird durch das value-Attribut übertragen. Das data-Tag ist wie time, span oder em ein inline-Element, führt nicht zu einem Zeilenumbruch und muss geschlossen werden.

<data value="xxx">Inhalt</data>

In diesem Beispiel umspannt das data-Element den Namen des Produkts und gibt dem Script Zugriff auf die Artikelnummer. Für den Preis des Produkts gibt das data-Element eine Dezimalzahl mit Punkt anstelle des Kommas an und die Gültigkeit des Angebots ist als Wochenzahl 19 im data-Element mit der CSS-Klasse week eingetragen.

<div class="sku">
	<data value="477244">Bürste Minimale</data>
</div>
<div class="price">
	<del><data value="euro">€</data><data value="16.00">16,00</data></del>
</div>
<div class="sale">Aktionspreis 
	<data value="euro">€</data>
	<data value="12.00">12,00</data> 
	(<data class="week" value="19">nur diese Woche</data>)
</div>

• 
  Bürste Minimale
  €16,00
  Aktionspreis €12,00 (nur diese Woche)
• 
  Handtücher Lomostrick
  €17,20
  Aktionspreis €13,90 (nur diese Woche)

Alternative: HTML-data-Attribut

In der Praxis wird das data-Element kaum benutzt. Das data-* Attribut liefert ebenfalls zusätzliche Informationen, die für Skripte und Anwendungen gedacht sind. Das data-*-Attribut ist wesentlich flexibler als das HTML Data-Tag. Für Suchmaschinen zieht zudem JSON-LD besser als das data-Tag.

<section data-section-key="22" data-title="CSS">…</section>

Maschinenlesbare Zeit und Datum

Für Zeit und Datum gibt es ein spezifischeres HTML-Element: Das öffnende HTML-time-Tag hat ein Attribut datetime.