⬆

Attribute

Data Dash (Data Attribute)

siehe auch

Man kann in HTML5 eigene Attribute erzeugen die man für Javascript und CSS nutzen kann. Attribute, die es schon gibt, sollte man nicht durch ein Datadash Attribut ersetzen.

Wenn man ein bestimmtes Attribut braucht, das es in HTML5 nicht gibt, kann man so ein Data-Attribut erzeugen auch data-dash genannt. Du kannst beliebige eigene Informationen an HTML-Elemente hängen, die es im HTML-Standard offiziell nicht gibt. Der Browser und Suchmaschinen ignorieren diese Daten komplett – sie sind rein dafür da, dass du mit JavaScript oder CSS darauf zugreifen kannst.

Es beginnt immer mit data. Dann folgt ein Bindestrich und ein selbst vergebener Name.
data-band="Beatles" data-food="Gemüse", data-user-id ="5345"

<div data-user-id="4345">user</div>

In Javascript gibt es ein spezielle Methode, um auf so ein Datadash Attribut zuzugreifen. Mit dataset wird das Attribut gelesen.

HTML

<div id="fred" data-band="Queen">

Script

document.getElementById("fred").dataset.band;//Queen

Attribute mit mehren Bindestrichen (Kebab-Case) werden in Javascript mit Camel Case notiert.

HTML

<div data-user-id="4345">user</div>

Script

element.dataset.userId;

Strukturierte Daten mit HTML5 Microdata (Schema.org)

Mit Microdata können HTML-Elemente mit maschinenlesbaren Zusatzinformationen angereichert werden. Während normales HTML festlegt, wie Inhalte für Menschen aussehen, hilft Microdata Suchmaschinen (wie Google) zu verstehen, was ein Inhalt bedeutet (z. B. ob ein Textname ein Autor, ein Produktname oder ein Veranstaltungsort ist).

Über die Website Schema.org stehen Hunderte standardisierte Typen zur Verfügung. Hier ein Beispiel

1. Die 3 Grundattribute von Microdata

2. Praxis-Beispiel im HTML-Code

Das folgende Beispiel zeigt einen Artikel, bei dem der Autor und das Erscheinungsdatum mit Microdata ausgezeichnet sind:

<article itemscope itemtype="https://schema.org/NewsArticle">

  <h1 itemprop="headline">Einführung in HTML5-Semantik</h1>

  <p>
    Autor: 
    <span itemprop="author" itemscope itemtype="https://schema.org/Person">
      <span itemprop="name">Max Mustermann</span>
    </span>
  </p>

  <p>
    Datum: 
    <time itemprop="datePublished" datetime="2026-09-14">14. September 2026</time>
  </p>

  <div itemprop="articleBody">
    <p>Hier steht der Text des Artikels...</p>
  </div>

</article>

3. Was passiert beim Verschachteln?

In der Praxis sind Schema-Objekte oft ineinander geschachtelt. Im obigen Beispiel ist das Hauptobjekt vom Typ NewsArticle. Da die Eigenschaft author selbst wieder ein eigenes Objekt darstellt (eine Person), wird an dieser Stelle ein neues itemscope vom Typ Person geöffnet.

4. Typische Anwendungsfälle (Schema.org Vokabular)

Über die Website Schema.org stehen Hunderte standardisierte Typen zur Verfügung. Die häufigsten im Webdesign sind:

5. Die moderne Alternative: JSON-LD

Obwohl Microdata direkt im HTML funktioniert, wird es bei komplexeren Seiten schnell unübersichtlich. Wenn du das Design deiner Seite änderst, musst du oft auch die Microdata-Attribute mühsam anpassen. siehe Beispiel

Die moderne und von Google bevorzugte Lösung heißt JSON-LD (JavaScript Object Notation for Linked Data). Der Vorteil: Das HTML bleibt völlig sauber, und alle strukturierten Daten werden zentral in einem kleinen Skript-Block abgelegt.

Gleicher Inhalt – als JSON-LD:

So sieht der genau gleiche Artikel mit JSON-LD aus. Der Code gehört vorzugsweise in den <head>-Bereich deiner HTML-Seite:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "NewsArticle",
  "headline": "Einführung in HTML5-Semantik",
  "datePublished": "2026-09-14",
  "author": {
    "@type": "Person",
    "name": "Max Mustermann"
  }
}
</script>

Microdata vs. JSON-LD im Überblick