<data>: Das Data-Element

Das <data> HTML-Element verknüpft ein bestimmtes Inhaltselement mit einer maschinenlesbaren Übersetzung. Wenn der Inhalt zeit- oder datumsbezogen ist, muss das <time>-Element verwendet werden.

Probieren Sie es aus

<p>New Products:</p>
<ul>
  <li><data value="398">Mini Ketchup</data></li>
  <li><data value="399">Jumbo Ketchup</data></li>
  <li><data value="400">Mega Jumbo Ketchup</data></li>
</ul>

data:hover::after {
  content: " (ID " attr(value) ")";
  font-size: 0.7em;
}

Attribute

Zu den Attributen dieses Elements gehören die globalen Attribute.

value: Dieses Attribut gibt die maschinenlesbare Übersetzung des Inhalts des Elements an.

Beispiele

Das folgende Beispiel zeigt Produktnamen an, die jeweils mit einer Produktnummer verknüpft sind.

html

<p>New Products</p>
<ul>
  <li><data value="398">Mini Ketchup</data></li>
  <li><data value="399">Jumbo Ketchup</data></li>
  <li><data value="400">Mega Jumbo Ketchup</data></li>
</ul>

Ergebnis

Technische Zusammenfassung

Inhaltskategorien	Fließende Inhalte, Phrasing-Inhalte, greifbare Inhalte.
Zulässiger Inhalt	Phrasing-Inhalte.
Tag-Auslassung	Keine, sowohl das öffnende als auch das schließende Tag sind obligatorisch.
Zulässige Eltern	Jedes Element, das Phrasing-Inhalte akzeptiert.
Implizite ARIA-Rolle	`generic`
Zulässige ARIA-Rollen	Beliebig
DOM-Schnittstelle	[`HTMLDataElement`](/de/docs/Web/API/HTMLDataElement)

Spezifikationen

Browser-Kompatibilität

Siehe auch

Das HTML <time>-Element.

<data>: Das Data-Element

In diesem Artikel