<data>

Zuletzt aktualisiert am 6. Februar 2026

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.

Grundlagen

• 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

Beispiele

<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

Das <data> Element wird von allen modernen Browsern vollständig unterstützt.

Email-Kompatibilität

Das <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.

Verwandte Elemente