Semantische Elemente

Zuletzt geprüft am 7. September 2026 von Daniel Weihmann

Semantisches HTML heißt: Das Element sagt, was der Inhalt ist, nicht wie er aussieht. Ein <nav> ist eine Navigation, auch wenn es aussieht wie eine Zeile Text. Für den Browser macht das oft keinen sichtbaren Unterschied, für alles andere schon – Screenreader bauen daraus eine Sprungliste, Suchmaschinen erkennen den Hauptinhalt, Leseansichten wissen, was sie behalten müssen.

Hier stehen die Elemente, die im Alltag tragen; die vollständige Liste aller 139 HTML-Elemente steht bei redirect301.de. Die Elemente auf dieser Seite gibt es seit HTML5, sie sind also seit über fünfzehn Jahren in jedem Browser. Trotzdem besteht ein großer Teil des Webs weiterhin aus <div>-Verschachtelungen. Der Umstieg kostet nichts: Wo <div class="header"> steht, kann <header> stehen.

Das Grundraster

Vier Elemente bilden das Gerüst fast jeder Seite. Sie heißen Landmarken, weil Screenreader sie als Orientierungspunkte anbieten – man springt direkt zum Hauptinhalt, ohne die Navigation zu durchlaufen.

<body>
  <header>
    <a href="/">Logo</a>
    <nav aria-label="Hauptnavigation">…</nav>
  </header>

  <main id="inhalt">
    <h1>Worum es auf dieser Seite geht</h1>
    <article>…</article>
  </main>

  <aside>
    <h2>Verwandtes</h2>
  </aside>

  <footer>
    <nav aria-label="Rechtliches">…</nav>
  </footer>
</body>

Vier Landmarken, dazu die Navigationen mit eigenem Namen.

Die Elemente im Einzelnen

<header>: Der einleitende Bereich – meist Logo, Seitentitel und Hauptnavigation. <header> darf mehrfach vorkommen: Auch ein einzelner Artikel kann einen eigenen Kopf mit Überschrift und Datum haben. Als Landmarke zählt aber nur der, der direkt im <body> steht.
<nav>: Ein Block wichtiger Navigationslinks. Nicht jede Ansammlung von Links ist eine Navigation – die drei Links im Fließtext eines Absatzes gehören nicht hinein. Gibt es mehrere, braucht jede ein aria-label, sonst heißen sie im Screenreader alle „Navigation".
<main>: Der Inhalt, der diese Seite von jeder anderen unterscheidet. Alles, was auf allen Seiten gleich ist – Kopfzeile, Navigation, Fußzeile – gehört nicht hinein. Pro Seite darf nur ein sichtbares <main> existieren, und es darf nicht in <article>, <aside>, <header> oder <footer> stecken.
<article>: Ein in sich abgeschlossener Inhalt, der auch für sich allein Sinn ergibt. Die Probe: Ließe er sich als eigener Beitrag in einen Feed übernehmen? Ein Blogbeitrag, eine Produktkarte, ein einzelner Kommentar – ja. Der dritte Absatz eines Textes – nein.
<section>: Ein thematischer Abschnitt innerhalb eines größeren Zusammenhangs. Eine <section> gehört immer mit einer Überschrift zusammen; ohne sie ist meistens ein <div> gemeint. Als reine Layout-Klammer ist sie falsch gewählt.
<aside>: Inhalt, der nur mittelbar zum Haupttext gehört: Randnotizen, Hinweiskästen, eine Liste verwandter Beiträge, Werbung. Entscheidend ist nicht, dass etwas rechts steht, sondern dass es sich entfernen ließe, ohne dass der Haupttext unvollständig wird.
<footer>: Abschließende Angaben zum umgebenden Bereich: Urheber, Rechtliches, weiterführende Links. Wie <header> auch mehrfach möglich, etwa als Fuß eines einzelnen Artikels mit Autor und Datum.
<figure> und <figcaption>: Für Inhalte, auf die im Text verwiesen wird und die sich verschieben ließen, ohne dass der Text bricht: Abbildungen, Diagramme, Codebeispiele, Zitate. Die <figcaption> ist die Bildunterschrift und ersetzt keinen alt-Text – sie steht für alle da, der Alternativtext nur für die, die das Bild nicht sehen.
<time>: Macht ein Datum maschinenlesbar: <time datetime="2026-09-07">7. September 2026</time>. Das Attribut nimmt das ISO-Format, der sichtbare Text darf frei formuliert sein. Nützlich für Veröffentlichungsdaten, Öffnungszeiten und Dauern.
<address>: Kontaktangaben zum Autor des umgebenden Artikels oder der Seite – nicht für beliebige Postanschriften im Text. Eine Lieferadresse in einem Absatz ist kein <address>.
<details> und <summary>: Ein Aufklappbereich ohne eine Zeile JavaScript. <summary> ist die immer sichtbare Zeile, der Rest erscheint auf Klick. Tastatur- und Screenreader-Bedienung bringt der Browser mit. Für häufig gestellte Fragen oder lange Beispiele die einfachste brauchbare Lösung.

article oder section?

Das ist die Frage, an der die meisten hängen bleiben. Die kurze Antwort: Ein <article> steht für sich, eine <section> ist Teil von etwas. Ein Rezept auf einer Rezeptseite ist ein Artikel. „Zutaten" und „Zubereitung" darin sind Abschnitte, weil sie ohne das Rezept sinnlos wären.

So

<article>
  <h2>Ofengemüse</h2>
  <section>
    <h3>Zutaten</h3>
  </section>
  <section>
    <h3>Zubereitung</h3>
  </section>
</article>

Nicht so

<section class="wrapper">
  <section class="row">
    <section class="col">
      <h2>Ofengemüse</h2>
    </section>
  </section>
</section>

Rechts ist <section> als Layout-Baustein missbraucht. Für reine Anordnung ist <div> das richtige Element: Es hat bewusst keine Bedeutung und stört deshalb auch keine.

div ist nicht verboten

Das gerät gern in Vergessenheit. Semantisches HTML heißt nicht, jedes <div> zu ersetzen, sondern das passende Element zu nehmen – und wenn es keins gibt, ist <div> genau richtig. Ein Grid-Container, ein Wrapper für einen Rahmen, eine Gruppe für ein Flex-Layout: alles <div>. Falsch wird es erst, wenn ein <div> die Arbeit eines Buttons, einer Überschrift oder einer Liste übernimmt.

Dasselbe gilt für <span> im Fließtext. Es ist der neutrale Behälter für Textteile, während <em> Betonung ausdrückt und <strong> Wichtigkeit. Wer nur fett darstellen will, ohne dass der Screenreader es hervorhebt, nimmt <span> mit CSS oder <b>.

Überschriften gehören zur Semantik

Die Landmarken teilen die Seite grob ein, die Überschriften gliedern den Inhalt. Beides zusammen ergibt die Struktur, über die sich eine Seite bedienen lässt. Deshalb braucht jeder <section>-Block und jedes <article> eine Überschrift, und die Ebenen dürfen nicht springen. Mehr dazu steht auf der Seite zur Barrierefreiheit in HTML, wo auch erklärt ist, warum das für viele Nutzer der wichtigste Navigationsweg überhaupt ist.

Verbreiteter Irrtum: HTML5 hatte einmal einen „Gliederungsalgorithmus" vorgesehen, nach dem jede <section> die Überschriftenebene automatisch verschachtelt – man hätte überall <h1> schreiben können. Der Algorithmus wurde nie in einem Browser umgesetzt und ist inzwischen aus der Spezifikation entfernt. Die Ebenen müssen von Hand stimmen.

Häufige Verwechslungen

<main> um die ganze Seite gelegt. Dann gehören Kopf- und Fußzeile zum Hauptinhalt, und der Sprunglink führt wieder an den Anfang.
Jede Seitenspalte ein <aside>. Die Entscheidung fällt am Inhalt, nicht an der Position. Eine Spalte mit dem Inhaltsverzeichnis der Seite ist eher eine Navigation.
Mehrere <nav> ohne Namen. Ohne aria-label sind Haupt- und Fußnavigation im Screenreader nicht unterscheidbar.
<article> für Layoutkarten. Eine Kachel, die nur Bild und Link enthält, ist kein eigenständiger Beitrag.
Listen als Absätze. Aufzählungen gehören in <ul> oder <ol> – der Screenreader kündigt dann „Liste mit sieben Einträgen" an, was beim Zuhören enorm hilft.

Ob die Struktur am Ende aufgeht, lässt sich ohne Zusatzwerkzeug prüfen: In den Entwicklerwerkzeugen von Firefox und Chrome zeigt die Barrierefreiheits-Ansicht den Baum aus Landmarken und Überschriften genau so, wie ein Screenreader ihn sieht. Was dort unbenannt oder verschachtelt aussieht, ist es auch.