Beispiel ohne strukturiertes Markup: Eine Hotelwebsite schreibt einfach in html:
<p>Doppelzimmer ab 120 € pro Nacht, Check-in ab 15 Uhr.</p>

Mensch versteht: Preis, Zimmer, Uhrzeit.
KI/Suchmaschine sieht nur Text, ohne Kontext.

---

Beispiel mit strukturiertem Markup (das ist die "Sprache", mit der Webseiten Maschinen erklären, was ihre Inhalte bedeuten. Schema.org in JSON-LD)

<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Offer",
"itemOffered": {
"@type": "Room",
"name": "Doppelzimmer"
},
"price": "120",
"priceCurrency": "EUR",
"availability": "https://schema.org/InStock",
"validFrom": "2025-09-19",
"checkinTime": "15:00"
}
</script>

---

Die KI versteht:

Es geht um ein Angebot.

Preis: 120 Euro

Produkt: Doppelzimmer

Check-in: ab 15 Uhr

Vorteile

Suchmaschinen (Google, Bing): können Rich Snippets anzeigen (z. B. Preise, Bewertungen, Öffnungszeiten direkt in den Suchergebnissen).

Sprachassistenten (Alexa, Siri, Google Assistant, ChatGPT): können präzise Antworten geben.

Barrierefreiheit: Screenreader oder KI-gestützte Services erkennen Inhalte besser.

---

Standards für strukturiertes Markup

Schema.org → am weitesten verbreitet (für Hotels, Restaurants, Produkte, Events etc.).

JSON-LD (empfohlen von Google) → separate Script-Blöcke im HTML.

Microdata / RDFa → Inline-Markup, heute weniger gebräuchlich.

 

Kurz gesagt: Strukturiertes Markup ist die "Sprache", mit der Webseiten Maschinen erklären, was ihre Inhalte bedeuten.

---

Was ist ein semantisches Markup?

Markup bedeutet: Zusätzliche Auszeichnungen im Quelltext einer Webseite (meist HTML oder XML).

Semantisch heißt: Diese Auszeichnung trägt Bedeutung, nicht nur Design.

Ein semantisches Markup macht also klar, was ein Inhalt ist – nicht nur, wie er aussieht.

---

Beispiel

- für visuelles Markup (HTML für Darstellung)
<b>Hotelzimmer ab 120 €</b>

Der Text ist fett, aber Maschinen verstehen nicht, ob es ein Preis, Produkt oder Angebot ist.

- für semantisches Markup

<p>Hotelzimmer ab <span itemprop="price">120 €</span> pro Nacht</p>

Durch itemprop="price" versteht auch eine Suchmaschine: "Das hier ist der Preis des Angebots."

---

Wichtige Formen von semantischem Markup

HTML5 semantische Tags:
<article>, <header>, <footer>, <nav>, <section> → geben Struktur und Bedeutung.

Schema.org Markup (meist als JSON-LD):
→ Standard, damit Google, Bing & KI-Systeme Inhalte wie Hotel, Zimmer, Preis, Bewertung erkennen.

ARIA-Rollen für Barrierefreiheit:
role="button" oder aria-label="Menü" → helfen Screenreadern und KI-Systemen.

---

Wichtig, weil

SEO: Rich Snippets (z. B. Sternebewertungen, Preise, Events in Google).

KI-Suche: Chatbots, Sprachassistenten, LLMs verstehen die Inhalte besser.

Barrierefreiheit: Inhalte werden auch für Screenreader nutzbar.

---

Kurz gesagt: Semantisches Markup ist die "Sprache für Maschinen", um Webinhalte eindeutig zu verstehen.