<data>: Das Data-Element
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since October 2017.
Das <data>
HTML-Element verknüpft ein gegebenes Stück Inhalt 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
Die Attribute dieses Elements umfassen die globalen Attribute.
value
-
Dieses Attribut gibt die maschinenlesbare Übersetzung des Inhalts des Elements an.
Beispiele
Das folgende Beispiel zeigt Produktnamen, verknüpft jedoch 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 Übersicht
Inhaltskategorien | Fließender Inhalt, formulierungsmäßiger Inhalt, fühlbarer Inhalt. |
---|---|
Erlaubter Inhalt | Formulierungsmäßiger Inhalt. |
Tag-Auslassung | Keine, sowohl der Anfangs- als auch der End-Tag sind obligatorisch. |
Erlaubte Eltern | Jedes Element, das formulierungsmäßigen Inhalt akzeptiert. |
Implizite ARIA-Rolle |
generisch
|
Erlaubte ARIA-Rollen | Beliebig |
DOM-Schnittstelle | [`HTMLDataElement`](/de/docs/Web/API/HTMLDataElement) |
Spezifikationen
Specification |
---|
HTML # the-data-element |
Browser-Kompatibilität
Siehe auch
- Das HTML-
<time>
-Element.