<data>
Das <data> Element verknüpft einen menschenlesbaren Text mit einem maschinenlesbaren Wert. Während der sichtbare Text frei formuliert werden kann, enthält das value-Attribut den technischen Wert für Maschinen, Skripte oder APIs. Es ist wie eine Brücke zwischen dem, was Menschen sehen, und dem, was Computer verstehen.
- Kategorie
- Text & Typografie
- Art
- Inline
- Attribute
- 1
- Browser
- 5 von 5
- 5 von 5
- Stand
- 06.02.2026
Grundlagen
6 Punkte- Macht beliebige Daten maschinenlesbar über das
value-Attribut - Inline-Element für die Verwendung in Fließtext
- Ähnlich wie
<time>, aber für beliebige Werte statt nur Datum/Uhrzeit - Nützlich für Produktnummern, Artikelnummern, ISBN, Barcodes oder technische IDs
- Browser zeigen nur den Textinhalt an, nicht das
value-Attribut - JavaScript kann einfach auf den maschinenlesbaren Wert zugreifen
Syntax
<p>Produkt: <data value="UPC:036000291452">Erdnussbutter</data></p>Attribute
1 AttributBeispiele
<h2>Bestseller</h2>
<ul>
<li><data value="978-3-16-148410-0">Der Herr der Ringe</data> - 12,99 €</li>
<li><data value="978-0-7475-3269-9">Harry Potter und der Stein der Weisen</data> - 9,99 €</li>
<li><data value="978-0-345-39180-3">Der Hobbit</data> - 10,99 €</li>
</ul><p>Status: <data value="200">Erfolgreich</data></p>
<p>Fehlercode: <data value="404">Seite nicht gefunden</data></p>
<p>Server: <data value="500">Interner Serverfehler</data></p><table>
<tr>
<th>Produkt</th>
<th>Preis</th>
</tr>
<tr>
<td><data value="SKU-001-RED">Rotes T-Shirt</data></td>
<td>19,99 €</td>
</tr>
<tr>
<td><data value="SKU-002-BLU">Blaue Jeans</data></td>
<td>49,99 €</td>
</tr>
<tr>
<td><data value="SKU-003-GRN">Grüne Jacke</data></td>
<td>79,99 €</td>
</tr>
</table>Barrierefreiheit
Das <data> Element hat keine speziellen Barrierefreiheits-Features. Screenreader lesen nur den sichtbaren Text vor, nicht das value-Attribut. Das ist meistens genau richtig, da der maschinenlesbare Wert für Menschen nicht relevant ist.
Wenn der maschinenlesbare Wert auch für Screenreader-Nutzer wichtig ist, musst du ihn im sichtbaren Text erwähnen oder mit aria-label beschreiben.
Häufige Fehler
value-Attribut vergessen: Das <data> Element ohne value-Attribut ist nutzlos. Dann kannst du auch einfach ein <span> verwenden.
<!-- Falsch: Kein value-Attribut -->
<p>Produkt: <data>Erdnussbutter</data></p>
<!-- Richtig: Mit value-Attribut -->
<p>Produkt: <data value="UPC:036000291452">Erdnussbutter</data></p>Für Datum/Uhrzeit verwenden: Für Datum und Uhrzeit gibt es das spezialisierte <time> Element mit besserer Semantik und zusätzlichen Vorteilen. Nutze <data> nur für andere Datentypen.
<!-- Falsch: Datum in <data> -->
<p>Veröffentlicht am: <data value="2026-02-06">6. Februar 2026</data></p>
<!-- Richtig: Datum in <time> -->
<p>Veröffentlicht am: <time datetime="2026-02-06">6. Februar 2026</time></p>Browser-Kompatibilität
5 von 5Das <data> Element wird von allen modernen Browsern vollständig unterstützt.
-
Chrome
Komplett
-
Firefox
Komplett
-
Safari
Komplett
-
Edge
Komplett
-
Opera
Komplett
Email-Kompatibilität
5 von 5Das <data> Element wird von den meisten Email-Clients unterstützt, verhält sich aber wie ein normales Inline-Element. Das value-Attribut ist für Email-Clients nicht relevant.
-
Apple Mail
Komplett
-
Gmail
Komplett
-
Outlook
Komplett
-
Yahoo Mail
Komplett
-
Thunderbird
Komplett
Newsletter
einmal die Woche, kostenlosNeue Artikel und Videos, was sich auf der Lernplattform tut, und ab und zu ein Sonderpreis zum Kursstart. Kurz genug, dass du es auch liest.
Zuletzt verschickt · KW 40
Einmal alles neu, und die Lernplattform ist da