Was ist semantisches HTML?
Semantisches HTML bedeutet, Elemente so zu wählen, dass sie beschreiben, was der Inhalt ist und nicht, wie er aussieht. Ein <nav> ist ein Navigationsblock. Ein <article> ist ein eigenständiger Inhalt. Ein <button> führt eine Aktion aus. Diese Elemente vermitteln eine Bedeutung, auf die Browser, assistierende Technologien und Suchmaschinen reagieren können.
Die Alternative ist eine Seite, die aus generischen <div>- und <span>-Elementen besteht, oft als „Div-Suppe“ bezeichnet. Sie kann auf dem Bildschirm identisch aussehen, ist aber für Screenreader undurchsichtig und schwerer zu warten. Semantik kostet nichts und zahlt sich überall aus.
Landmarks
Landmark-Elemente definieren die Hauptbereiche einer Seite und ermöglichen es Nutzern, zwischen diesen zu springen.
<!-- layout.html -->
<body>
<header>
<a href="/">hackweb</a>
<nav aria-label="Main">
<a href="/guides">Guides</a>
</nav>
</header>
<main>
<h1>Guides</h1>
</main>
<footer>
<p>© 2026 hackweb.dev</p>
</footer>
</body>- header — einleitende Inhalte für die Seite oder einen Abschnitt.
- nav — ein Block mit Navigationslinks. Kennzeichnen Sie wiederkehrende Navigationsbereiche mit
aria-label. - main — der primäre Inhalt; wird nur einmal verwendet und von Screenreadern direkt angesteuert.
- aside — Inhalte, die tangential zum Hauptinhalt stehen.
- footer — abschließende Inhalte wie Copyright-Informationen oder weiterführende Links.
Nutzer von Screenreadern können Landmarks auflisten und zwischen ihnen springen, wodurch eine lange Seite in eine navigierbare Struktur verwandelt wird.
Überschriften
Überschriften bilden die Gliederung der Seite. Verwenden Sie ein einzelnes <h1> für das Hauptthema, gefolgt von <h2> und <h3> für Abschnitte und Unterabschnitte.
<!-- outline.html -->
<h1>CSS Grid</h1>
<h2>Tracks and lines</h2>
<h3>Defining columns</h3>
<h3>Placing items</h3>
<h2>Responsive grids</h2>Wählen Sie eine Überschriftenebene niemals aufgrund ihrer Größe aus. Nutzen Sie CSS für das Erscheinungsbild und Überschriften für die Struktur. Das Überspringen von Ebenen, wie etwa der Sprung von h1 zu h4, macht die Gliederung für assistierende Technologien unverständlich.
Inhaltselemente
Neben Landmarks bietet HTML Elemente für spezifische Arten von Inhalten.
- article — eigenständige Inhalte, die auch alleine stehen könnten, wie ein Post oder ein Kommentar.
- section — eine thematische Gruppe, meist mit einer Überschrift.
- figure und figcaption — Medien mit einer Bildunterschrift.
- blockquote und cite — ein Zitat und dessen Quelle.
- time — ein Datum oder eine Uhrzeit mit einem maschinenlesbaren
datetime. - address — Kontaktinformationen.
- ul, ol, dl — ungeordnete, geordnete und Beschreibungslisten.
<!-- post.html -->
<article>
<h1>What is DNS?</h1>
<p><time datetime="2026-09-15">September 15, 2026</time></p>
<figure>
<img src="/dns.svg" alt="A DNS lookup walks the name hierarchy" width="800" height="400" />
<figcaption>Resolving a name step by step.</figcaption>
</figure>
<blockquote cite="https://example.com">
<p>DNS is the internet's phone book.</p>
</blockquote>
</article>Die Verwendung des richtigen Elements bedeutet, dass Sie das korrekte Standardverhalten und die richtige Semantik erhalten, ohne zusätzlichen Aufwand.
Links versus Buttons
Dies ist der häufigste semantische Fehler.
- Verwende
<a href>für die Navigation zu einer URL. Dies unterstützt den Rechtsklick, das Öffnen in einem neuen Tab, Lesezeichen und die Aktivierung per Tastatur. - Verwende
<button>für Aktionen, die einen Zustand ändern oder Daten übermitteln. Diese sind fokussierbar, per Tastatur bedienbar und werden als Button angesagt.
<!-- controls.html -->
<a href="/guides/css">Read the CSS guide</a>
<button type="button" onclick="toggleMenu()">Toggle menu</button>Ein <div onclick="..."> sieht klickbar aus, ist aber nicht per Tastatur erreichbar, wird nicht als Steuerelement angesagt und ist nicht fokussierbar. Um dies zu beheben, müsste man alles manuell nachbauen, was ein Button standardmäßig kostenlos mitbringt.
Formulare und Tabellen
Formulare haben ihre eigene Semantik: <form>, <label>, <fieldset>, <legend>, <input>, <select> und <textarea>. Jedes Eingabefeld sollte ein Label haben, und das Gruppieren zusammengehöriger Steuerelemente mit fieldset und legend hilft allen Nutzern. Der Guide zu Formularen & Validierung geht detaillierter darauf ein.
Tabellen sind für tabellarische Daten gedacht, nicht für das Layout. Verwende <table>, <thead>, <tbody>, <th> zusammen mit scope und <caption>, damit die Beziehung zwischen Zellen und Headern klar ersichtlich ist.
Wann ein div völlig in Ordnung ist
Generische Elemente sind keine Sünde. Verwenden Sie <div> und <span>, wenn Sie tatsächlich einen Container für das Styling oder das Layout benötigen, der keine semantische Bedeutung hat. Die Regel ist einfach: Greifen Sie zu einem semantischen Element, wenn eines existiert, und nutzen Sie ein div, wenn keines passt. Das Hinzufügen von section ohne Überschrift oder nav um einen einzelnen, nicht zusammenhängenden Link erzeugt eher Rauschen als Bedeutung.
Best Practices
- Verwende nur ein
h1und halte die Überschriftenebenen in der richtigen Reihenfolge. - Strukturiere Seiten mit header, nav, main und footer.
- Nutze article und section für Inhalte anstelle von div.
- Bevorzuge button für Aktionen und Anker für die Navigation.
- Gib jedem Bild einen aussagekräftigen
alt-Text oderalt="", falls es rein dekorativ ist. - Beschrifte Formularsteuerelemente und gruppiere zusammengehörige Felder.
- Validiere dein HTML, damit der Parser keine Fehler korrigieren muss.
Häufige Fehler
- Alles nur aus divs und spans aufbauen.
- Ein div mit einem onclick verwenden, anstatt eines buttons.
- Überschriften-Level nach der Schriftgröße auswählen.
- Mehrere h1-Elemente ohne ein klares Hauptthema.
- Tabellen für das Layout verwenden.
- Einzelne Links in ein nav einschließen oder section ohne Überschrift verwenden.
Wie geht es weiter?
Semantik ist das Fundament für eine barrierefreie und auffindbare Seite. Baue auf den HTML-Grundlagen auf, mache deine Seite mit dem Accessibility-Guide inklusiv, unterstütze sie mit SEO-Grundlagen und vervollständige das Gesamtbild mit Formularen & Validierung.