<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.
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>
Ergebnis
Technische Zusammenfassung
| Inhaltskategorien | Fließender Inhalt, Textinhalt, greifbarer Inhalt. |
|---|---|
| Erlaubter Inhalt | Textinhalt. |
| Tag-Auslassung | Keine, sowohl das Start- als auch das End-Tag sind obligatorisch. |
| Erlaubte Eltern | Jedes Element, das Textinhalt akzeptiert. |
| Implizite ARIA-Rolle |
generisch
|
| Erlaubte ARIA-Rollen | Jede |
| DOM-Schnittstelle | [`HTMLDataElement`](/de/docs/Web/API/HTMLDataElement) |
Spezifikationen
| Spezifikation |
|---|
| HTML # the-data-element |
Browser-Kompatibilität
Siehe auch
- Das HTML
<time>-Element.