HTML <data>-Tag

Das <data>-Tag ist ein HTML-Element, das einen sichtbaren Inhalt mit einer maschinenlesbaren Version desselben Wertes verknüpft. Der benutzerfreundliche Text verbleibt innerhalb des Elements, während die präzise, skriptfreundliche Form im value-Attribut gespeichert wird.

Dies ist nützlich, wenn Skripte Daten in einem bestimmten Format benötigen, das dem Benutzer nicht angezeigt werden soll. Stellen Sie sich beispielsweise eine Produktliste vor. Jedes Produkt hat eine interne ID, aber die Käufer sollen nur den Produktnamen sehen. Sie legen die ID im value-Attribut ab und den lesbaren Namen zwischen den Tags, sodass JavaScript die ID auslesen kann, während der Benutzer den Namen liest:

<data value="1545325112">Coca-Cola 500ml</data>

Hier ist 1545325112 der maschinenlesbare Wert (die Produkt-ID) und Coca-Cola 500ml ist das, was der Benutzer sieht.

Wann <data> verwenden

<data> ist eine von mehreren Möglichkeiten, maschinenlesbare Daten an Inhalte zu knüpfen. Die Wahl des richtigen Mittels ist wichtig:

• <data> verwenden, wenn es einen sichtbaren Textabschnitt gibt, der ein natürliches maschinenlesbares Gegenstück hat — eine Produkt-ID, eine Bestellnummer, eine SKU, einen Enum-Wert oder eine numerisch ausgedrückte Bewertung. Das Element ist ein echtes HTML-Element, daher ist die Beziehung zwischen Text und Wert Teil der Dokumentsemantik.
• Ein data-*-Attribut verwenden (zum Beispiel data-product-id="1545325112"), wenn der Wert zu einem beliebigen Element gehört und lediglich eine Stelle benötigt wird, von der eigene Skripte ihn lesen können. data-* ist flexibler, da es auf jedes Tag gesetzt und jeder Attributname verwendet werden kann, trägt jedoch keine standardisierte Bedeutung.
• Microdata (itemprop) oder JSON-LD verwenden, wenn das Ziel darin besteht, strukturierte Daten für Suchmaschinen (schema.org) bereitzustellen. <data> teilt Google allein nicht mit, was der Wert bedeutet.

Ein häufiges Muster ist die Kombination von <data> mit Microdata, wobei itemprop die Eigenschaft benennt und value die genaue Zahl überträgt:

<data itemprop="productID" value="1545325112">Coca-Cola 500ml</data>

<data> vs. <time>

Das <time>-Element ist ein spezialisiertes Geschwisterelement von <data>. Die semantische Grenze ist einfach:

• <time> ausschließlich für Datumsangaben, Uhrzeiten, Zeitspannen und Zeitzonen verwenden (es hat ein eigenes datetime-Attribut und ein definiertes Parsingformat).
• <data> für alle anderen maschinenlesbaren Werte verwenden — IDs, Preise, Mengen, Codes usw.

<time datetime="2026-06-17">17. Juni</time> ist daher korrekt, aber eine Produkt-ID würde man niemals in <time> einschließen.

Den Wert mit JavaScript auslesen

<data> wird durch die HTMLDataElement-Schnittstelle repräsentiert, deren value-Eigenschaft das value-Attribut widerspiegelt. Der Wert kann daher direkt ausgelesen werden:

<data id="drink" value="1545325112">Coca-Cola 500ml</data>

<script>
  const el = document.getElementById("drink");

  console.log(el.value);                  // "1545325112"  (HTMLDataElement.value)
  console.log(el.getAttribute("value"));  // "1545325112"  (raw attribute)
  console.log(el.textContent);            // "Coca-Cola 500ml"  (visible text)
</script>

Sowohl el.value als auch el.getAttribute("value") geben den maschinenlesbaren string zurück; textContent liefert das menschenlesbare Label.

Barrierefreiheit

Unterstützende Technologien wie Screenreader lesen den sichtbaren Textinhalt vor, nicht das value-Attribut. Ein Screenreader-Nutzer hört „Coca-Cola 500ml", niemals „1545325112".

Daher muss der sichtbare Text stets für sich allein aussagekräftig sein. Verstecken Sie niemals Informationen, die ein Benutzer benötigt, im value-Attribut und erwarten Sie nicht, dass Screenreader sie vorlesen. Behandeln Sie value ausschließlich als Datenquelle für Skripte, und halten Sie alle benutzerseitigen Informationen im Textinhalt des Elements.

Browserunterstützung und SEO

Jeder moderne Browser verarbeitet <data>, aber es gibt keine besondere visuelle oder verhaltenstechnische Darstellung — es wird genau wie ein <span> angezeigt. Sein Zweck ist rein semantisch.

Aus demselben Grund ist <data> kein Ersatz für strukturierte Daten. Suchmaschinen interpretieren ein bloßes value-Attribut nicht als schema.org-Daten. Wenn Sie Rich Results benötigen, verwenden Sie geeignete Microdata (itemprop) oder, was heute häufiger ist, JSON-LD.

Syntax

Das <data>-Tag wird paarweise verwendet. Der Inhalt steht zwischen dem öffnenden (<data>) und dem schließenden (</data>) Tag.

Beispiel des HTML-<data>-Tags:

HTML-<data>-Tag

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p>Refrigerated drinks</p>
    <ul>
      <li>
        <data value="1545325112">Coca-Cola 500ml</data>
      </li>
      <li>
        <data value="1545325113">Coca-Cola 330ml</data>
      </li>
      <li>
        <data value="1545325114">Coca-Cola Light 330ml</data>
      </li>
    </ul>
  </body>
</html>

Attribute

Das <data>-Tag unterstützt außerdem die Globalen Attribute und die Event-Attribute.

Übung