HTML `<data>`-Tag

Das <data>-Element ist Teil von HTML5.1. Das Tag wird verwendet, um ein maschinenlesbares Analogon für die angegebenen Daten zu definieren (eine standardisierte Version, die von automatisierten Systemen oder Skripten auf der Website verstanden werden kann).

Dies kann nützlich sein, wenn die Daten in einem bestimmten Format vorliegen müssen, das für das Ausführen von Skripten erforderlich ist, Sie dieses Format jedoch nicht für Ihre Benutzer sichtbar machen möchten. Ein Beispiel: Sie möchten eine Liste von Produkten anzeigen, aus der Ihre Benutzer auswählen können. Jedes Produkt hat eine eigene ID, die Sie jedoch nicht direkt anzeigen möchten. In diesem Fall platzieren Sie die Produkt-IDs in das <data>-Tag, und die Maschine verarbeitet diese Informationen und zeigt den Benutzern das Produkt mit der entsprechenden ID an.

Das <data>-Tag verwendet das value-Attribut, um eine maschinenlesbare Version seines Inhalts zu speichern. Dies ermöglicht es Skripten, den zugrunde liegenden Wert zu verarbeiten, während gleichzeitig ein anderer Text für die Benutzer angezeigt wird.

Der sichtbare Inhalt innerhalb des <data>-Tags sollte beschreibend sein, da assistive Technologien das value-Attribut möglicherweise nicht lesen. Außerdem wird das value-Attribut möglicherweise nicht von Suchmaschinen-Crawlern indexiert.

Wir empfehlen die Verwendung des <time>-Tags, wenn der Wert datums- oder zeitbezogen ist.

Syntax

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

Beispiel für das HTML `<data>`-Tag:

HTML <data>-Tag

html

<!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>

Try it Yourself »

Ergebnis

data example

Attribute

Attribut	Wert	Beschreibung
value	maschinenlesbares Format	Legt die maschinenlesbare Version des Inhalts des `<data>`-Tags fest.

Das <data>-Tag unterstützt auch die Globalen Attribute und die Ereignisattribute.

Praxis

Wofür wird das <data>-Tag in HTML verwendet und was stellt es dar?

Das <data>-Tag wird verwendet, um auf externe Daten zu verlinken.Das <data>-Tag stellt das Ergebnis einer Berechnung in einem Skript dar.Das <data>-Tag wird verwendet, um einen Text in eine andere Sprache zu übersetzen.Das <data>-Tag wird verwendet, um eine leichter lesbare Version bestimmter Datenarten anzugeben.Das <data>-Tag stellt maschinenlesbare Inhalte dar.

HTML <data>-Tag ​

Syntax ​

Beispiel für das HTML <data>-Tag: ​

Ergebnis ​