HTML data: Maschinenlesbare Informationen

Maschinenlesbare Informationen

Das HTML data-Element versorgt Inhalte mit einer maschinenlesbaren Version, um einem Script den einfachen Zugriff auf Werte zu liefern und gleichzeitig dem Leser einen einfach zu lesenden Text zu bieten.

Die Daten für den Leser können in anderen Maßeinheiten geschrieben werden, während die maschinenlesbaren Daten z.B. für die Sortierung und Berechnungen verwendet werden können.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

data-Element

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>
  • Demobild
    Bürste Minimale
    16,00
    Aktionspreis 12,00 (nur diese Woche)
  • Demo
    Handtücher Lomostrick
    17,20
    Aktionspreis 13,90 (nur diese Woche)

Maschinenlesbare Zeit und Datum

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