Semantic HTML: Schönheit für Menschen, Struktur für Maschinen

Wer heute eine Website betreibt – sei es für Tischlerei, Steuerberatung oder Ferienwohnung – kommt an einem Thema nicht mehr vorbei: Semantik im HTML. Warum das wichtig ist? Weil nicht nur Menschen Deine Website lesen. Sondern auch Maschinen.

Google, ChatGPT, Siri und andere KI-Systeme brauchen Struktur, um zu verstehen, worum es auf Deiner Website geht.

Und genau hier kommt Semantic HTML ins Spiel.

Was ist Semantic HTML?

Statt wild durcheinander <div> und <span> zu verwenden (wie früher üblich), setzt Semantic HTML auf sprechende, bedeutungsvolle Tags:

Nicht-semantisch	Semantisch
<div>	<header>, <footer>, <main>, <article>, <section>, <nav>, <aside>, <figure> usw.

Diese Tags sagen Maschinen (und Menschen mit Screenreadern), was ein Bereich bedeutet – nicht nur, wie er aussieht.

Warum ist Semantic HTML wichtig?

1. SEO (Suchmaschinenoptimierung)

Google liebt Struktur. Semantic HTML macht es Google leichter, relevante Inhalte zu erkennen:

• Was ist der Hauptinhalt? → <main>
• Was ist Navigation? → <nav>
• Was ist ein Blogartikel? → <article>

2. Barrierefreiheit

Screenreader können semantische Bereiche vorlesen – wichtig für gesetzeskonforme, zugängliche Websites.

3. Künstliche Intelligenz & Sprachsuche

KI-Modelle verstehen Inhalte besser, wenn sie sauber gegliedert sind. Das ist essenziell, wenn Du künftig bei Sprachsuchen („Hey Siri, finde einen Elektriker in Grömitz“) erscheinen willst.

4. Wartbarkeit & Skalierbarkeit

Code mit klarer Semantik ist leichter zu lesen, zu pflegen und zu erweitern – auch wenn mal eine andere Agentur übernimmt.

Praxis: Wie sieht Semantic HTML aus?

Vorher (nicht-semantisch):

<div class="wrapper">
  <div class="top-bar"></div>
  <div class="content">
    <div class="left"></div>
    <div class="main-content">
      <div class="post-title"></div>
      <div class="post-body"></div>
    </div>
    <div class="right"></div>
  </div>
  <div class="footer"></div>
</div>

Nachher (semantisch):

<header></header>
<nav></nav>
<main>
  <article>
    <h1>Titel des Beitrags</h1>
    <p>Hier steht der Text.</p>
  </article>
  <aside>Verwandte Artikel</aside>
</main>
<footer></footer>

Ergebnis: Gleicher Inhalt, aber viel besser lesbar – auch für Google & Co.

Umsetzung in WordPress

1. Themenwahl & Pagebuilder

Ein modernes, gut gepflegtes Theme nutzt bereits Semantic HTML. Gute Wahl:

• GeneratePress
• Astra
• Blocksy
• Kadence

Achte darauf, dass nicht alles nur aus <div> besteht.

👉 Tipp: Nutze die Browser-Entwicklertools (Rechtsklick → „Untersuchen“), um Dir den HTML-Code anzusehen.

2. Block Editor (Gutenberg)

Der WordPress-Block-Editor nutzt bereits viele semantische Tags:

• Überschrift-Block → <h1> bis <h6>
• Absatz → <p>
• Liste → <ul>, <li>
• Bild mit Bildunterschrift → <figure>, <figcaption>

Achte beim Schreiben von Seiten und Beiträgen darauf, die Hierarchie der Überschriften korrekt zu nutzen:
Nur eine <h1> pro Seite, darunter <h2>, <h3> usw.

3. Yoast SEO oder RankMath

Diese Plugins helfen nicht direkt bei Semantic HTML, aber:

• Sie erkennen, ob Deine Überschriftenstruktur sinnvoll ist.
• Sie prüfen, ob eine Seite genug Text, Bilder und Struktur enthält.
• Sie erzeugen automatisch strukturierte Daten (schema.org) – etwa für Artikel, FAQs oder Produkte.

👉 Extra-Tipp: Nutze das „FAQ“-Block-Modul von Yoast oder RankMath – das generiert automatisch JSON-LD-Markup.

4. Custom Templates / Elementor / WPBakery

Wenn Du mit Pagebuildern arbeitest:

• Prüfe, ob Du semantische Container-Tags nutzen kannst.
• Bei Elementor kannst Du z. B. bei Containern den „HTML Tag“ auf <section>, <article> usw. setzen.

Bonus: Strukturdaten & Schema-Markup

Semantic HTML ist der erste Schritt. Die nächste Stufe ist strukturierter Code für Suchmaschinen. Beispiel mit schema.org:

<article itemscope itemtype="https://schema.org/Article">
  <h1 itemprop="headline">Warum Semantic HTML?</h1>
  <p itemprop="articleBody">...</p>
</article>

Das erkennt Google als Blogartikel mit Titel und Inhalt.

Plugins wie Yoast SEO, RankMath oder Schema Pro übernehmen das oft automatisch.

Wer sichtbar sein will, muss verständlich schreiben – für Menschen und Maschinen.

Semantic HTML ist wie Straßenmarkierungen für Deine Website:
Für Menschen macht es die Navigation angenehmer.
Für Maschinen sorgt es dafür, dass Du überhaupt gefunden wirst.

Sönke Schäfer, SeSoft GmbH Web/Database/Solutions

Und es ist kein Hexenwerk – vor allem mit WordPress.

Du hast eine Website für Dein KMU – aber Google & Co verstehen nur Bahnhof?
Dann wird’s Zeit für einen Frühjahrsputz im HTML.
Der Datenschäfer hilft Dir dabei:
🐑 Struktur, Sichtbarkeit und echte KI-Freundlichkeit – ganz ohne Schnickschnack.

1. MDN Web Docs (Deutsch): Semantic HTML
   https://developer.mozilla.org/de/docs/Glossary/Semantic
   Fundierte Einführung in semantische HTML-Elemente mit Beispielen und Erläuterungen.
2. Google Web.dev: Strukturierte Daten & Semantik
   https://web.dev/learn/html/semantic-html/
   Offizielle Google-Ressource zu semantischem HTML, verständlich erklärt – auch mit Hinweisen zur Wirkung auf SEO.
3. SELFHTML Wiki: HTML – Semantische Auszeichnung
   https://wiki.selfhtml.org/wiki/HTML/Semantik
   Die deutsche Referenz für Webentwicklung, ausführlich zu semantischer Gliederung und Barrierefreiheit.
4. Seokratie Blog: Warum HTML-Struktur wichtig für SEO ist
   https://www.seokratie.de/html-struktur-seo/
   Praxisnaher Blogbeitrag mit konkreten SEO-Beispielen für bessere Lesbarkeit durch semantisches HTML.
5. BITV-Test – Barrierefreiheit nach WCAG / BITV 2.0
   https://www.bitv-test.de/bitv_test/das_testverfahren/pruefschritte/pruefschritt_9.1.1.1.html
   Offizielle Kriterien zur semantischen Auszeichnung für barrierefreie Websites in Deutschland.