HTML & CSS

Semantisches HTML5: Das richtige Grundgerüst

Semantisches HTML gibt deinen Seiten Struktur und Bedeutung. Du lernst die wichtigsten HTML5-Elemente kennen und baust ein sauberes Grundgerüst.

Anton

— 3 Min. Lesezeit
Teilen
Semantisches HTML5: Das richtige Grundgerüst

Eine Webseite ist mehr als nur Text in beliebigen Behältern. Mit semantischem HTML5 gibst du jedem Bereich deiner Seite eine klare Bedeutung. Das hilft nicht nur Suchmaschinen und Screenreadern, sondern macht deinen Code auch für dich selbst übersichtlicher. In diesem Beitrag schauen wir uns an, wie ein sauberes Grundgerüst aussieht und welche Elemente du dafür brauchst.

Was bedeutet semantisch?

Semantisch bedeutet, dass ein Element seine Bedeutung durch seinen Namen ausdrückt. Ein <header> ist offensichtlich ein Seitenkopf, ein <nav> enthält die Navigation. Früher hat man fast alles in <div>-Container gepackt, was zwar funktioniert, aber keine Bedeutung trägt. Vergleiche die beiden Ansätze:

<!-- Ohne Semantik: alles div -->
<div class="kopf">...</div>
<div class="navigation">...</div>
<div class="inhalt">...</div>

<!-- Mit Semantik: sprechende Elemente -->
<header>...</header>
<nav>...</nav>
<main>...</main>

Die zweite Variante liest sich fast wie ein Inhaltsverzeichnis deiner Seite.

Das grundlegende Dokument

Jede HTML5-Seite beginnt mit einer festen Struktur. Die Doctype-Angabe, das <html>-Element mit Sprachangabe sowie <head> und <body> bilden das Fundament:

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Meine Webseite</title>
  </head>
  <body>
    <!-- Hier kommt der sichtbare Inhalt -->
  </body>
</html>

Das lang="de" ist wichtig: Es teilt Browsern und Vorlesehilfen mit, dass die Seite auf Deutsch ist. Das charset stellt sicher, dass Umlaute korrekt dargestellt werden.

Die wichtigsten Struktur-Elemente

HTML5 bietet mehrere Elemente, um den Seitenaufbau klar zu gliedern. Hier die wichtigsten im Zusammenspiel:

<body>
  <header>
    <h1>Mein Blog</h1>
    <nav>
      <ul>
        <li><a href="/">Start</a></li>
        <li><a href="/about">Über mich</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <article>
      <h2>Mein erster Beitrag</h2>
      <p>Hier steht der Inhalt des Artikels.</p>
    </article>
  </main>

  <footer>
    <p>&copy; 2026 Mein Blog</p>
  </footer>
</body>

Das <main> umschließt den Hauptinhalt und sollte nur einmal pro Seite vorkommen. Ein <article> steht für einen in sich abgeschlossenen Inhalt.

Abschnitte und Randinhalte

Für thematische Gruppierungen innerhalb des Inhalts gibt es <section>, für ergänzende Inhalte wie Seitenleisten <aside>:

<main>
  <section>
    <h2>Neueste Artikel</h2>
    <article>
      <h3>CSS lernen</h3>
      <p>Eine kurze Einführung.</p>
    </article>
  </section>

  <aside>
    <h2>Über den Autor</h2>
    <p>Kurze Beschreibung in der Seitenleiste.</p>
  </aside>
</main>

Eine <section> sollte immer eine Überschrift haben, da sie einen thematischen Abschnitt einleitet.

Warum sich der Aufwand lohnt

Semantisches HTML bringt gleich mehrere Vorteile. Hier die wichtigsten auf einen Blick:

  • Barrierefreiheit: Screenreader können die Struktur vorlesen und Nutzer schneller navigieren lassen.
  • Suchmaschinen: Google versteht den Aufbau deiner Seite besser.
  • Wartbarkeit: Dein Code ist leichter lesbar und für andere Entwickler nachvollziehbar.
  • Weniger Klassen: Du brauchst nicht für jeden Bereich eine eigene CSS-Klasse.

Ein gutes Mittelding für Bereiche ohne semantische Bedeutung bleibt das <div>. Es ist nicht verboten, sondern einfach der neutrale Container, wenn kein passendes semantisches Element existiert.

Fazit

Ein sauberes HTML5-Grundgerüst beginnt mit der richtigen Dokumentstruktur und nutzt semantische Elemente wie <header>, <nav>, <main>, <article> und <footer>. Damit gibst du deiner Seite eine klare Bedeutung, die Mensch und Maschine gleichermaßen verstehen. Greife nur dann zu <div>, wenn wirklich kein passendes Element existiert. Wenn du dieses Grundgerüst verinnerlichst, legst du das Fundament für barrierefreie und gut auffindbare Webseiten.

Weiterlesen