Themenbereich · 17 Artikel
Semantisches HTML
Semantisches HTML ist für mich die Grundlage, auf der alles andere auf dieser Website aufbaut. Bevor es um Barrierefreiheit, Suchmaschinen oder Performance geht, steht eine einfache Frage: Beschreibt mein Markup, was ein Inhalt ist – oder nur, wie er aussehen soll? Ein <button> ist ein Button, eine <nav> ist eine Navigation, eine <table> ist eine Datentabelle. Wer diese Bedeutung im Code ausdrückt, statt alles in <div>s zu verpacken, bekommt Tastaturbedienung, Screenreader-Unterstützung und maschinelle Lesbarkeit zu großen Teilen geschenkt.
In diesem Bereich gehe ich das Thema von Grund auf an.
Was ist semantisches HTML?
klärt den Begriff und zeigt an konkreten Beispielen, warum die Wahl des richtigen Elements mehr ist als Kosmetik. Darauf aufbauend erkläre ich die
Struktur-Elemente header, nav, main und footer, mit denen du eine Seite klar gliederst, sowie die Frage, wann article oder section das passende Werkzeug ist. Was im unsichtbaren <head> steht – Zeichensatz, Viewport, Titel –, rundet die Grundlagen ab.
Ein eigener Schwerpunkt liegt auf der Dokument-Outline: Eine lückenlose Überschriften-Hierarchie von h1 bis h6 ist eines der wichtigsten Orientierungssignale – für Menschen, die mit einem Screenreader von Überschrift zu Überschrift springen, ebenso wie für Suchmaschinen. Ergänzt wird das durch Landmarks und die Outline, Listen, Tabellen, die Inline-Auszeichnung mit Elementen wie strong, time oder abbr, figure und figcaption für beschriftete Inhalte sowie das korrekte Auszeichnen von Zitaten.
Eine eigene Gruppe bilden die interaktiven und Medien-Elemente, die HTML schon mitbringt: native Aufklapp-Bereiche mit details und summary, die
Formular-Semantik mit den richtigen Input-Typen
und semantische Medien mit audio, video und track.
Mindestens so wichtig wie das richtige Element ist das Vermeiden des falschen. Deshalb behandle ich gezielt typische Stolperfallen: den Unterschied zwischen div und span und wie du „div-Suppe“ vermeidest – also Seiten, die technisch funktionieren, semantisch aber nichts aussagen. Ob dein Markup dabei überhaupt fehlerfrei ist, prüfst du mit dem W3C-Validator.
Warum dieser Aufwand? Weil saubere Semantik an einer einzigen Stelle gleich mehrere Probleme löst. Dasselbe Markup, das einem Screenreader die Struktur einer Seite verrät, gibt auch Web-Crawlern wie dem Googlebot und KI-Crawlern wie GPTBot oder ClaudeBot einen verlässlichen Bauplan – und es bleibt für dich und dein Team langfristig wartbar, weil der Code beschreibt, was er bedeutet, statt nur, wie er aussieht.
Mein Rat: Lies die Grundlagen einmal der Reihe nach und nimm dir danach die Themen heraus, die zu deinem aktuellen Projekt passen. Jede Seite steht für sich, ist aber mit den verwandten Artikeln verlinkt.