Semantisches HTML

Zuletzt aktualisiert am 3. Februar 2026

Du könntest eine komplette Website nur mit <div>-Elementen bauen, technisch würde sie funktionieren. Aber du würdest damit wichtige Informationen verschenken. Semantische HTML-Elemente sagen dem Browser, Suchmaschinen und Screenreadern, was der Inhalt bedeutet, nicht nur wie er aussehen soll.

Was bedeutet “semantisch”?

“Semantisch” bedeutet “bedeutungstragend”. Ein semantisches HTML-Element beschreibt die Rolle seines Inhalts:

Semantische Seitenstruktur

<header>Kopfbereich</header>
<nav>Navigation</nav>
<main>
  <article>
    Ein eigenständiger Inhalt
  </article>
</main>
<footer>Fußbereich</footer>

Vorschau

Vergleiche das mit der unsemantischen Variante:

<div>Kopfbereich</div>
<div>Navigation</div>
<div>
  <div>
    Ein eigenständiger Inhalt
  </div>
</div>
<div>Fußbereich</div>

Für den Nutzer sieht beides gleich aus. Aber für Maschinen ist die erste Variante viel informativer.

Semantisch vs. unsemantisch im Vergleich

Der folgende Vergleich zeigt denselben Inhalt: einmal mit semantischen Elementen, einmal nur mit <div>. Visuell sehen beide Varianten ähnlich aus, aber für Screenreader und Suchmaschinen ist die semantische Version viel informativer:

Semantisch vs. unsemantisch

<!-- ✓ Semantisch -->
<nav>
  <a href="/">Home</a>
  <a href="/blog">Blog</a>
</nav>
<main>
  <article>
    <h2>Mein Beitrag</h2>
    <p>Artikeltext...</p>
  </article>
</main>
<footer>
  <small>© 2026</small>
</footer>

<!-- ✗ Unsemantisch -->
<div>
  <a href="/">Home</a>
  <a href="/blog">Blog</a>
</div>
<div>
  <div>
    <h2>Mein Beitrag</h2>
    <p>Artikeltext...</p>
  </div>
</div>
<div>
  <small>© 2026</small>
</div>

Vorschau

Warum semantisches HTML wichtig ist

1. Barrierefreiheit

Screenreader nutzen semantische Elemente, um durch die Seite zu navigieren. Ein blinder Nutzer kann direkt zur Navigation (<nav>) oder zum Hauptinhalt (<main>) springen. Mit reinen <div>-Elementen ist das nicht möglich.

2. SEO (Suchmaschinenoptimierung)

Suchmaschinen wie Google verstehen semantisches HTML und können den Inhalt besser einordnen. Ein <article> signalisiert: “Das hier ist ein eigenständiger Inhalt”. Ein <div> sagt gar nichts.

3. Wartbarkeit

Wenn du Monate später deinen eigenen Code liest, sagt <nav> sofort “hier ist die Navigation”. Bei <div class="nav-wrapper"> musst du erst die Klasse interpretieren.

4. Browser-Features

Manche Browser-Features setzen auf semantisches HTML. Der Reader-Modus in Safari und Firefox erkennt <article> und extrahiert automatisch den Hauptinhalt.

Die wichtigsten semantischen Elemente

Seitenstruktur

Element	Zweck
`<header>`	Kopfbereich der Seite oder eines Abschnitts
`<nav>`	Navigationsbereich mit Links
`<main>`	Hauptinhalt der Seite (nur einmal pro Seite)
`<footer>`	Fußbereich der Seite oder eines Abschnitts
`<aside>`	Seitenleiste oder ergänzender Inhalt

Inhaltsgliederung

Element	Zweck
`<article>`	Eigenständiger Inhalt (Blog-Post, Kommentar, Produkt)
`<section>`	Thematisch zusammengehörender Abschnitt

Textbedeutung

Element	Zweck
`<strong>`	Starke Betonung (nicht nur fett!)
`<em>`	Betonung (nicht nur kursiv!)
`<blockquote>`	Zitat aus anderer Quelle
`<time>`	Datum oder Uhrzeit (maschinenlesbar)
`<mark>`	Hervorgehobener/markierter Text
`<code>`	Quellcode-Fragment

Typische Seitenstruktur

So sieht eine gut strukturierte HTML-Seite aus:

<body>
  <header>
    <nav>
      <a href="/">Home</a>
      <a href="/blog">Blog</a>
      <a href="/about">Über mich</a>
    </nav>
  </header>

  <main>
    <article>
      <h1>Mein Artikel</h1>
      <p>Der Artikeltext...</p>

      <section>
        <h2>Erster Abschnitt</h2>
        <p>Inhalt des Abschnitts...</p>
      </section>

      <section>
        <h2>Zweiter Abschnitt</h2>
        <p>Weiterer Inhalt...</p>
      </section>
    </article>

    <aside>
      <h2>Verwandte Artikel</h2>
      <ul>
        <li><a href="/post-2">Anderer Artikel</a></li>
      </ul>
    </aside>
  </main>

  <footer>
    <p>&copy; 2026 Meine Website</p>
  </footer>
</body>

`<div>` vs. semantische Elemente: wann was?

Die Frage ist nicht “Div oder semantisch?”, denn beides hat seinen Platz:

Verwende semantische Elemente, wenn der Inhalt eine bestimmte Bedeutung hat:

Navigation → <nav>
Hauptinhalt → <main>
Eigenständiger Beitrag → <article>
Kopf-/Fußbereich → <header> / <footer>

Verwende <div>, wenn du einen Container nur für Layout oder Styling brauchst, ohne semantische Bedeutung:

Flexbox/Grid-Wrapper
Styling-Container für Hintergrundfarben
JavaScript-Anker ohne inhaltliche Bedeutung

<!-- Semantisch: Der Inhalt hat eine Bedeutung -->
<article>
  <h2>Blog-Post Titel</h2>
  <p>Inhalt...</p>
</article>

<!-- div: Reiner Layout-Wrapper -->
<div class="grid grid-cols-2 gap-4">
  <article>Post 1</article>
  <article>Post 2</article>
</div>

Überschriften-Hierarchie

Überschriften (<h1> bis <h6>) sind ein wichtiger Teil der Semantik. Sie bilden eine hierarchische Gliederung des Inhalts:

<h1>Seitentitel</h1>                    <!-- Ebene 1 -->
  <h2>Kapitel</h2>                      <!-- Ebene 2 -->
    <h3>Unterkapitel</h3>               <!-- Ebene 3 -->
    <h3>Weiteres Unterkapitel</h3>      <!-- Ebene 3 -->
  <h2>Nächstes Kapitel</h2>            <!-- Ebene 2 -->

Regeln für Überschriften:

Nur ein <h1> pro Seite (der Haupttitel)
Keine Ebenen überspringen (<h1> → <h3> ohne <h2> ist schlecht)
Überschriften nicht für Schriftgröße missbrauchen, dafür gibt es CSS

Häufige Fehler

Alles in <div> packen: Die sogenannte “Div-Suppe”. Frag dich bei jedem <div>: Gibt es ein semantisches Element, das hier besser passt?
<section> als Div-Ersatz: <section> ist für thematisch zusammengehörende Abschnitte gedacht, nicht als generischer Container. Wenn du keine Überschrift dafür hast, ist <div> vermutlich passender.
<article> nur für Blog-Posts: Ein <article> ist jeder eigenständige Inhalt, auch Kommentare, Produktkarten oder Social-Media-Posts.
Überschriften-Ebenen überspringen: Von <h2> direkt zu <h4> springen verwirrt Screenreader und ist schlechte Semantik.

Zusammenfassung

Semantisches HTML kostet dich keinen Extra-Aufwand: du tauschst einfach <div> gegen das passende Element aus. Dafür bekommst du:

Bessere Barrierefreiheit
Bessere SEO
Lesbareren Code
Browser-Features wie den Reader-Modus

Die Faustregel: Wähle immer das Element, das die Bedeutung deines Inhalts am besten beschreibt. Nur wenn kein semantisches Element passt, greifst du zum <div>.

Im nächsten Artikel schauen wir uns den Unterschied zwischen Block- und Inline-Elementen genauer an.

Erhalte neue Inhalte direkt in dein Postfach

Was erwartet dich?

Neue Artikel & Videos

Wenn ich was Neues veröffentliche, erfährst du's hier zuerst.

Plattform & Kurs-Updates

Neue Kurse, Referenz-Updates und gelegentlich Sonderpreise zum Launch.

Einmal die Woche in deinem Postfach

Kurz, auf den Punkt, kein Spam.