Ein <div> mit der Klasse "header" und ein <header>-Element sehen für Benutzer gleich aus. Für Suchmaschinen, Screenreader und andere Entwickler sind sie jedoch völlig unterschiedlich. Semantisches HTML verwendet Elemente, die die Bedeutung von Inhalten beschreiben, nicht nur ihr Aussehen. Dieser Leitfaden behandelt jedes semantische Element, das Sie verwenden sollten – und warum.

Nicht-semantisch vs. Semantisch

❌ Nicht-semantisch (div-Suppe)
<div class="header">
  <div class="nav">
    <div class="nav-item"><a href="/de/">Home</a></div>
  </div>
</div>
<div class="main">
  <div class="article">
    <div class="title">Mein Blogbeitrag</div>
    <div class="content">...</div>
  </div>
  <div class="sidebar">...</div>
</div>
<div class="footer">...</div>
✅ Semantisch
<header>
  <nav aria-label="Hauptnavigation">
    <a href="/de/">Home</a>
  </nav>
</header>
<main>
  <article>
    <h1>Mein Blogbeitrag</h1>
    <p>...</p>
  </article>
  <aside>...</aside>
</main>
<footer>...</footer>

Die semantischen Elemente

<header>

Einführende Inhalte für die Seite oder einen Abschnitt. Enthält typischerweise das Website-Logo, die Navigation und die Suchleiste. Kann innerhalb von <article> oder <section> für abschnittsspezifische Header verwendet werden.

<nav>

Ein Bereich mit Navigationslinks. Verwenden Sie dies für die Hauptnavigation, Breadcrumbs oder ein Inhaltsverzeichnis. Nicht jede Linkgruppe ist eine <nav> – nur wichtige Navigationsblöcke.

<main>

Der Hauptinhalt der Seite. Es sollte nur eine einzige <main>-Instanz pro Seite geben. Dies schließt Header-, Footer- und Sidebar-Inhalte aus, die sich seitenübergreifend wiederholen.

<article>

Ein in sich geschlossenes Inhaltselement, das unabhängig verbreitet werden könnte – ein Blogbeitrag, ein Nachrichtenartikel, eine Produktkarte, ein Kommentar. Wenn es eigenständig Sinn ergibt (z. B. in einem RSS-Feed), handelt es sich um einen Artikel.

<section>

Eine thematische Gruppierung von Inhalten, typischerweise mit einer Überschrift. Verwenden Sie dies, wenn <article> nicht zutreffend ist, die Inhalte aber einen eigenen Abschnitt der Seite bilden.

<aside>

Inhalte, die tangential mit dem umgebenden Inhalt zusammenhängen – Seitenleisten, Zitate, verwandte Links, Anzeigen. Kann innerhalb oder außerhalb von <article> stehen.

<footer>

Fußzeileninhalt für die Seite oder einen Abschnitt – Urheberrecht, Kontaktinformationen, rechtliche Links, Sitemap.

<figure> und <figcaption>

Grafik mit Bildunterschrift
<figure>
  <img src="chart.png" alt="Monatlicher Umsatzdiagramm zeigt 20% Wachstum">
  <figcaption>Abb. 1: Monatliches Umsatzwachstum Q1-Q2 2025</figcaption>
</figure>

<time>

Maschinenlesbare Datumsangaben
<time datetime="2025-07-08">8. Juli 2025</time>
<time datetime="2025-07-08T14:30:00Z">14:30 Uhr UTC</time>

Überschriftenhierarchie

Korrekte Überschriftenstruktur
<!-- ✅ Korrekt — logische Hierarchie -->
<h1>Seitentitel</h1>
  <h2>Hauptabschnitt</h2>
    <h3>Unterabschnitt</h3>
    <h3>Anderer Unterabschnitt</h3>
  <h2>Anderer Hauptabschnitt</h2>

<!-- ❌ Falsch — übersprungene Ebenen -->
<h1>Seitentitel</h1>
  <h4>Zufällige Überschrift</h4>  <!-- h2 und h3 übersprungen! -->

Warum semantisches HTML wichtig ist

  • SEO: Suchmaschinen nutzen semantische Elemente, um die Struktur Ihrer Seite zu verstehen. Ein <nav> sagt Google: "Das sind Navigationslinks". Ein <article> sagt ihm: "Das ist der Hauptinhalt".
  • Barrierefreiheit: Screenreader nutzen semantische Elemente als Orientierungspunkte. Ein blinder Benutzer kann direkt zu <main> springen, die <nav> überspringen oder nach <article> suchen.
  • Wartbarkeit: <header> ist für jeden Entwickler sofort verständlich. <div class="hdr-wrap"> erfordert jedoch eine nähere Untersuchung.
  • Lesemodus: Browser-Lesemodi (Safari, Firefox) verwenden <article>, um den Hauptinhalt zu extrahieren.

Testen Sie unsere kostenlosen HTML-Tools

Minifizieren und formatieren Sie Ihren HTML-Code sofort.