<data> HTML-Datenelement

Baseline Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Oktober 2017 browserübergreifend verfügbar.

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

In diesem Artikel

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

Die Attribute dieses Elements beinhalten die globalen Attribute.

value

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

Beispiele

Das folgende Beispiel zeigt Produktnamen, verbindet aber auch jeden Namen mit einer Produktnummer.

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>