Semantisches HTML

Wie funktioniert semantisches HTML?

web.dev beschreibt es so, dass man Inhalte danach strukturiert, was die Elemente bedeuten. Daraus entstehen Landmarken, an denen sich Screenreader und andere Hilfsmittel orientieren. Typische Elemente:

• <header>, <nav>, <main>, <footer> für den Seitenaufbau
• <article>, <section>, <aside> für Inhaltsblöcke
• <h1> bis <h6> für Überschriften
• <strong> und <em> für Betonung, wo <b> und <i> nur Fettschrift und Kursivschrift bedeuten

Ein <div> hat dagegen keine Bedeutung. Wer alles in <div>-Elemente packt, muss Rollen und Struktur mit zusätzlichem Aufwand nachrüsten.

Semantisches HTML und SEO

Der klarste Nutzen liegt bei Barrierefreiheit und Wartbarkeit. Für die Google Suche ist die Rolle bescheidener. Google schreibt im SEO-Leitfaden, dass eine semantische Reihenfolge der Überschriften sehr gut für Screenreader ist, es aus Sicht der Google Suche aber keine Rolle spielt, wenn die Reihenfolge anders aussieht. Außerdem enthalte das Web im Allgemeinen keinen gültigen HTML-Code, weshalb sich die Suche selten auf semantische Bedeutungen aus der HTML-Spezifikation verlassen könne.

Ein Ranking-Vorteil allein durch semantische Elemente ist daher nicht belegt. Abweichend davon nennt das MDN-Glossar den Einfluss auf Suchmaschinen-Rankings als Vorteil semantischer Elemente. Brauchbarer Aufbau hilft aber Nutzern mit Hilfsmitteln und allen Programmen, die eine Seite maschinell auslesen müssen.

Beispiel

Ohne Semantik:

<div class="top"><div class="menu">…</div></div>
<div class="content"><div class="title">Titel</div>…</div>

Mit Semantik:

<header><nav>…</nav></header>
<main>
  <article>
    <h1>Titel</h1>
    …
  </article>
</main>

Stand: 7. Oktober 2026