Semantik in der Tiefe

Zwei Webseiten können im Browser pixelgleich aussehen – und trotzdem trennen sie Welten. Die eine besteht aus verschachtelten <div>-Containern ohne Bedeutung, die andere aus semantischen Elementen, die jedem Programm der Welt erklären, was hier eigentlich steht: Das ist die Navigation, das der eigenständige Artikel, das eine Randnotiz. Screenreader, Suchmaschinen, Reader-Modi und KI-Systeme lesen keine Pixel – sie lesen deine Struktur. In dieser Lektion lernst du, diese Struktur bewusst und begründet zu wählen, statt zu raten.

„Der Browser zeigt doch beides gleich an – wozu der Aufwand?“ Diese Frage verdient eine präzise Antwort. Semantisches HTML hat vier handfeste Konsumenten:

• Assistive Technologien: Ein Screenreader bietet Nutzerinnen an, direkt zur <nav> oder zum <main>-Bereich zu springen. Bei einer Div-Wüste gibt es nichts anzuspringen – die Nutzerin muss sich durch die gesamte Seite tasten.
• Suchmaschinen: Crawler gewichten Inhalte nach ihrer strukturellen Rolle. Eine Überschrift in <h1> zählt anders als derselbe Text in einem fett formatierten <div>.
• Maschinelle Weiterverarbeitung: Reader-Modus, Vorlesefunktion, Übersetzer, KI-Assistenten – sie alle extrahieren Inhalte anhand der Semantik.
• Menschen, die deinen Code lesen: <article> dokumentiert die Absicht; <div class="box3"> dokumentiert nichts. Semantik ist eingebaute Dokumentation.

Kaum eine Frage wird so oft gestellt wie diese. Die Spezifikation gibt eine erstaunlich klare Entscheidungsregel her, die du als dreistufigen Test formulieren kannst:

1. Ergibt der Inhalt für sich allein Sinn – könnte er als eigenständiges Stück in einem RSS-Feed, auf einer anderen Seite oder als Suchergebnis stehen? Dann <article>. Das gilt für Blogbeiträge, Nachrichtenmeldungen, Produktkarten, Forenposts und einzelne Kommentare.
2. Ist es ein thematischer Abschnitt eines größeren Ganzen, der sinnvollerweise eine eigene Überschrift trägt (Kapitel, Themenblock)? Dann <section>.
3. Brauchst du den Container nur technisch – fürs Layout, als Styling-Haken, ohne inhaltliche Aussage? Dann ehrlich bleiben: <div>.

Der letzte Punkt ist wichtiger, als er klingt: Ein <div> ist kein Versagen. Falsche Semantik ist schädlicher als keine. Eine <section> ohne Überschrift und ohne thematische Klammer ist schlicht ein verkleidetes <div> – und verwirrt assistive Technologien mehr, als sie hilft.

Beachte zwei Feinheiten im Beispiel: <article>-Elemente dürfen verschachtelt werden – der Kommentar ist ein eigenständiges Stück Inhalt innerhalb des Beitrags. Und jede <section> trägt ihre eigene Überschrift. Genau daran erkennst du, dass sie ihre Existenz verdient hat.

Einige semantische Elemente sind mehr als Container: Sie definieren sogenannte Landmarks („Orientierungspunkte“), die assistive Technologien als Sprungziele anbieten. Für sie gelten klare Regeln:

Semantik endet nicht bei den großen Containern. Auch auf Textebene bietet HTML präzise Vokabeln, die oft ungenutzt bleiben:

• <time datetime="2026-07-13">13. Juli</time> – maschinenlesbare Zeitangaben.
• <abbr title="HyperText Markup Language">HTML</abbr> – Abkürzungen mit Erklärung.
• <cite> für Werktitel, <q> für Zitate im Fließtext, <blockquote> für abgesetzte Zitate.
• <mark> für hervorgehobene Fundstellen (z. B. Suchtreffer), <kbd> für Tasteneingaben, <code> für Quelltext, <samp> für Programmausgaben.
• <dfn> markiert die Stelle, an der ein Begriff definiert wird.

Und die Klassiker: <strong> bedeutet „wichtig“, <em> bedeutet „betont“ – während <b> und <i> nur noch für Fälle ohne besondere Wichtigkeit reserviert sind (Schlüsselwörter, Fachbegriffe, Schiffsnamen). Wer Fettdruck will, nimmt CSS.

Experimentiere im Editor: Ersetze das <blockquote> durch ein <q> im Fließtext, gib dem <abbr>-Element einen eigenen Satz oder baue ein verschachteltes <article> für einen Leserkommentar ein.

Überschriften sind das Inhaltsverzeichnis deiner Seite – Screenreader-Nutzer navigieren häufiger über Überschriften als über Landmarks. Daraus folgen drei Regeln, die du nie brechen solltest:

1. Eine <h1> pro Seite – sie benennt das Thema der Seite. (Mehrere sind seit HTML5 formal erlaubt, in der Praxis aber fast immer die schlechtere Wahl.)
2. Keine Ebene überspringen: Auf <h2> folgt <h3>, nicht <h5>. Die Ebene beschreibt die Gliederungstiefe, nicht die gewünschte Schriftgröße.
3. Keine Überschrift aus optischen Gründen: Wer nur großen Text will, nimmt CSS. Wer eine Gliederungsebene meint, nimmt ein Überschriften-Element.

In der nächsten Lektion verlassen wir den sichtbaren Bereich der Seite und nehmen den <head> auseinander: Metadaten, SEO-Grundlagen und alles, was Suchmaschinen und soziale Netzwerke über deine Seite wissen wollen.