Themenbereich · 17 Artikel
Semantisches HTML
Semantisches HTML heißt, Elemente nach der Bedeutung ihres Inhalts zu wählen und nicht nach seinem Aussehen: <nav> für eine Navigation, <button> für ein Bedienelement, <table> für Daten. Der HTML-Standard formuliert das als Pflicht – Elemente dürfen nicht für andere Zwecke als ihre vorgesehene Bedeutung verwendet werden, weil Software die Seite sonst nicht korrekt verarbeiten kann. Dieser Bereich geht das Thema in vier Schritten durch: Grundlagen und Struktur, Inhalte auszeichnen, interaktive und Medien-Elemente, Fehler vermeiden.
Das Wichtigste in Kürze
- Das Element sagt, was ein Inhalt ist. Wie er aussieht, regelt ausschließlich CSS. Zwei optisch identische Seiten können völlig unterschiedlich bedienbar sein.
- Aus dem Markup leitet der Browser den Accessibility Tree ab – Rolle, Name und Zustand je Knoten. Screenreader, Sprachsteuerung und Prüfwerkzeuge lesen nur diesen Baum.
<div>und<span>sind nicht verboten, sondern die letzte Wahl: Der Standard nennt<div>ein „element of last resort“. Falsch ist erst ein<div>an der Stelle eines vorhandenen Elements.- Der Aufwand ist null. Ein
<button>zu schreiben kostet exakt so viel wie ein<div>– teuer wird nur das Nachrüsten. - Stand Februar 2026: Die häufigsten Fehler im Web sind Semantikfehler – 53,1 % der Startseiten mit fehlendem Alternativtext, 51,0 % ohne Formular-Label, 46,3 % mit leeren Links (WebAIM Million).
- Semantik zahlt gleichzeitig auf Barrierefreiheit, Auffindbarkeit, Wartbarkeit und robustes Standardverhalten ein – eine Entscheidung, vier Gewinne.
- Rechtlicher Anker: WCAG 1.3.1 Info und Beziehungen (Stufe A) verlangt, dass visuell erkennbare Strukturen programmatisch bestimmbar sind – über BITV 2.0 und das BFSG ist das in Deutschland verbindlich.
Womit du anfängst
Mit den vier Struktur-Elementen. <header>, <nav>, <main> und <footer> kosten vier Umbenennungen und liefern vier Sprungziele – das beste Verhältnis von Aufwand zu Wirkung, das dieses Thema zu bieten hat. Danach die klickbaren <div>: Jedes wird zu <button> oder <a>, wodurch die Tastatur überhaupt erst hinkommt.
Vorher lohnt sich eine halbe Stunde für Was ist semantisches HTML? – dort steht, was im Accessibility Tree passiert, wenn du dich für ein Element entscheidest. Ohne dieses Bild bleibt die Elementwahl eine Konvention, die man befolgt; mit ihm wird sie eine Entscheidung, die man begründen kann.
Und wenn du eine bestehende Seite vor dir hast: Schalte einmal das CSS ab. Bleibt eine erkennbare Folge aus Kopfbereich, Überschriften, Listen und Fußbereich? Dann sitzt die Semantik. Zerfällt alles zu einem grauen Textblock, hast du den Einstiegspunkt gefunden – und der heißt „Div-Soup“ vermeiden.
Wie dieser Bereich aufgebaut ist
Grundlagen und Struktur klärt zuerst den Begriff und baut dann das Gerüst: Was ist semantisches HTML?, die Struktur-Elemente, die Abgrenzung von article und section, die Landmarks und die Dokument-Outline, die daraus entstehen, und schließlich das Unsichtbare im <head> – Zeichensatz, Viewport, Titel, Canonical.
Inhalte auszeichnen geht eine Ebene tiefer, in den Text selbst. Die Überschriften-Hierarchie ist dabei das wichtigste einzelne Signal: Sie ist die zweite Navigationsebene neben den Landmarks. Dazu kommen Listen mit ul, ol und dem oft vergessenen dl, Datentabellen mit th, scope und caption, die Inline-Auszeichnung mit strong, time oder abbr, figure und figcaption für beschriftete Abbildungen sowie das Auszeichnen von Zitaten mit blockquote, q und cite.
Interaktive und Medien-Elemente sind die Stelle, an der Semantik am meisten Arbeit spart, weil Verhalten mitkommt: details und summary liefern Aufklappbereiche samt Tastaturbedienung und Zustandsansage ohne eine Zeile Skript, die Formular-Semantik bringt mit den richtigen Input-Typen Tastaturlayout, Validierung und Autofill mit, und semantische Medien regeln mit audio, video und track die Untertitelspur.
Fehler vermeiden ist der Gegenpol: Der Unterschied zwischen div und span, das Erkennen und Aufräumen von Div-Soup und die Kontrolle mit dem W3C-Validator, der Verschachtelungsfehler und doppelte id-Werte findet, die keinem Auge auffallen.
Die wichtigsten HTML-Elemente im Überblick
HTML kennt gut 110 Elemente, aber im Alltag trägt eine deutlich kleinere Auswahl fast alles. Diese Übersicht sortiert sie nach Aufgabe – wer eine vollständige Liste sucht, findet sie im HTML-Standard.
| Aufgabe | Elemente | Vertiefung |
|---|---|---|
| Dokument | <!DOCTYPE html>, <html>, <head>, <body>, <meta>, <title>, <link>, <script>, <style> |
Dokument-Metadaten |
| Seitengerüst | <header>, <nav>, <main>, <article>, <section>, <aside>, <footer> |
Struktur-Elemente |
| Überschriften | <h1> bis <h6> |
Überschriften-Hierarchie |
| Text | <p>, <br>, <hr>, <strong>, <em>, <mark>, <small>, <sub>, <sup>, <abbr>, <time>, <code>, <kbd>, <pre> |
Textauszeichnung |
| Listen | <ul>, <ol>, <li>, <dl>, <dt>, <dd> |
Listen richtig nutzen |
| Tabellen | <table>, <caption>, <thead>, <tbody>, <tr>, <th>, <td> |
Tabellen semantisch aufbauen |
| Links & Buttons | <a>, <button> |
Buttons vs. Links |
| Bilder & Medien | <img>, <picture>, <source>, <figure>, <figcaption>, <audio>, <video>, <track> |
figure & figcaption |
| Formulare | <form>, <label>, <input>, <textarea>, <select>, <option>, <fieldset>, <legend> |
Formular-Semantik |
| Zitate | <blockquote>, <q>, <cite> |
Zitate richtig auszeichnen |
| Interaktiv ohne Skript | <details>, <summary>, <dialog> |
details & summary |
| Ohne eigene Bedeutung | <div>, <span> |
div vs. span |
Die letzte Zeile ist die wichtigste. <div> und <span> sind keine Fehler, sondern Werkzeuge für den Fall, dass kein bedeutungstragendes Element passt – der Standard nennt <div> ausdrücklich ein „element of last resort“. Zum Problem werden sie erst dort, wo es ein passendes Element gäbe: ein <div> mit onclick statt <button>, ein <div class="titel"> statt <h2>, eine Reihe von <div> statt <ul>.
Was in dieser Tabelle bewusst fehlt, sind die veralteten Elemente: <font>, <center>, <big> und <marquee> sind aus dem Standard entfernt. Browser stellen sie teils noch dar, gültiges HTML ist es nicht mehr – Gestaltung gehört seit zwanzig Jahren vollständig in CSS.
Warum es diesen Bereich gibt
Weil saubere Semantik an einer einzigen Stelle 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 wartbar, weil der Code beschreibt, was er bedeutet, statt nur, wie er aussieht. Diesen Zusammenhang zeigt Semantik, Barrierefreiheit, SEO und Performance im Detail.
Der zweite Grund ist unangenehmer: Die häufigsten Barrieren im Web sind keine exotischen Sonderfälle, sondern Semantikfehler. Fehlende Alternativtexte, unbeschriftete Formularfelder, leere Links und Buttons machen laut WebAIM Million zusammen mit Kontrastfehlern den Großteil aller messbaren Verstöße aus. Das sind alles Probleme, die beim Schreiben des Markups entstehen – und dort auch am günstigsten verschwinden.
Häufige Fragen
Wie viele HTML-Befehle gibt es?
Der HTML-Standard führt aktuell rund 110 Elemente. „Befehle“ ist dabei ein irreführender Begriff aus der Frühzeit: HTML ist keine Programmiersprache, sondern eine Auszeichnungssprache – ein Element befiehlt nichts, es beschreibt, was ein Inhalt ist. Im Alltag reicht die Auswahl aus der Tabelle oben für praktisch jede Seite; die übrigen sind Spezialfälle wie <ruby> für ostasiatische Lesehilfen oder <map> für verweissensitive Grafiken.
Muss ich alle 17 Seiten lesen?
Nein. Ich würd die Grundlagen einmal der Reihe nach lesen – Was ist semantisches HTML? und die Struktur-Elemente – und danach die Themen herausnehmen, die zum aktuellen Projekt passen. Jede Seite steht für sich und ist mit den verwandten Artikeln verlinkt.
Reicht semantisches HTML für Barrierefreiheit aus?
Für einen großen Teil ja, für alles nein. Statische Inhalte – Text, Bilder, Tabellen, Formulare, Navigation – sind mit sauberem HTML weitgehend erledigt. Zusammengesetzte Widgets wie Tabs, Comboboxen oder Karussells brauchen zusätzlich ARIA und Tastaturlogik; die stehen im Bereich Barrierefreie Komponenten. Und Kontrast, Zoom-Verhalten und Fokus-Sichtbarkeit sind CSS-Themen, nachzulesen unter Farbkontraste.
Gilt das auch für Seiten mit React, Vue oder Svelte?
Ja, im Browser landet dasselbe HTML. Was sich unterscheidet, ist die Fehlerquelle: Komponenten bringen gern ihr eigenes Wurzel-<div> mit, und Landmarks landen versehentlich mehrfach auf einer Seite. Fragmente statt Wurzel-Container, und <header>, <main>, <footer> gehören ins Layout, nicht in einzelne Bausteine.
Wie prüfe ich, ob mein Markup semantisch in Ordnung ist?
In drei Schritten: CSS abschalten (bleibt die Struktur erkennbar?), Landmark- und Überschriftenliste im Accessibility-Panel der Entwicklerwerkzeuge ansehen, einmal komplett durchtabben. Danach der W3C-Validator für die formalen Fehler. Der ausführliche Weg steht unter Barrierefreiheit selbst testen.
Verwandte Themen
- Barrierefreiheit verstehen – für wen das alles gemacht ist
- WCAG & BFSG – die Kriterien und die Rechtslage in Deutschland
- Barrierefreie Komponenten – wenn HTML allein nicht reicht
- SEO & KI – was Semantik für Sichtbarkeit bedeutet
- Glossar – Accessibility Tree, Landmark, Rolle und die übrigen Begriffe
Quellen
- Index of Elements (HTML-Standard, WHATWG – vollständige Liste aller Elemente mit Kontext und Attributen)
- Semantics (HTML-Standard, WHATWG – Pflicht zur bedeutungsgemäßen Verwendung von Elementen)
- The WebAIM Million (WebAIM – jährliche Auswertung der eine Million meistbesuchten Startseiten)
- Understanding SC 1.3.1 Info and Relationships (W3C – programmatische Bestimmbarkeit von Struktur)