HTML-Grundlagen · 5 von 9

Semantisches HTML

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.

Steckbrief Grundlagen

Reihe: HTML-Grundlagen
Teil: 5 von 9
Kapitel: 8
Vorschauen: 2
Lesezeit: 4 Min
Stand: 03.02.2026

Was bedeutet “semantisch”?

01 / 08

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

index.html

Semantische Seitenstruktur

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

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:

index.html

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>

Warum semantisches HTML wichtig ist

02 / 08

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

03 / 08

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

04 / 08

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?

05 / 08

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

06 / 08

Ü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

07 / 08

01 Alles in <div> packen

Die sogenannte “Div-Suppe”. Frag dich bei jedem <div>: Gibt es ein semantisches Element, das hier besser passt?

02 <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.

03 <article> nur für Blog-Posts

Ein <article> ist jeder eigenständige Inhalt, auch Kommentare, Produktkarten oder Social-Media-Posts.

04 Überschriften-Ebenen überspringen

Von <h2> direkt zu <h4> springen verwirrt Screenreader und ist schlechte Semantik.

Zusammenfassung

08 / 08

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.

einmal die Woche, kostenlos

Neue Artikel und Videos, was sich auf der Lernplattform tut, und ab und zu ein Sonderpreis zum Kursstart. Kurz genug, dass du es auch liest.

Zuletzt verschickt · KW 40

Einmal alles neu, und die Lernplattform ist da