Semantisches Markup
Die Kurzantwort · 11 Wörter
Kurz erklärt
Verwendung von HTML-Elementen entsprechend ihrer inhaltlichen Bedeutung statt reiner optischer Gestaltung.
Flow-alerta.cab (2026): Semantisches Markup. https://flow-alerta.cab/glossar/semantic-markup. Redaktionell geprüft am: 09. Oktober 2026.
Wie ausführlich soll es sein?
Praxis
Hilfreich für verständliche Struktur, assistive Technologien und Wartbarkeit; weitere Prüfungen bleiben erforderlich.
Mögliches Beispiel: Eine Artikelseite verwendet passende Struktur- und Überschriftenelemente; nicht jeder div-Container muss ersetzt werden.
Mögliche Anwendung: Inhaltliche Struktur mit passenden HTML-Elementen auszeichnen und danach Navigation, Tastaturbedienung und assistive Ausgabe prüfen. Rankings und vollständige Barrierefreiheit sind dadurch nicht garantiert.
Auf einen Blick
- Kern
- Semantisches Markup nutzt HTML-Tags wie <header>, <nav>, <main>, <article>, <section> und korrekte Überschriftenhierarchien (h1–h6). Dies vermittelt Browsern, Suchmaschinen und Screenreadern die logische Bedeutung des Inhalts.
- Nutzen
- Hilfreich für verständliche Struktur, assistive Technologien und Wartbarkeit; weitere Prüfungen bleiben erforderlich.
- Beispiel
- Mögliches Beispiel: Eine Artikelseite verwendet passende Struktur- und Überschriftenelemente; nicht jeder div-Container muss ersetzt werden.
- Grenzen
- Übermäßige Verwendung unsemantischer <div>- und <span>-Elemente (Div-Suppe); Überschriften nach Schriftgröße statt nach logischer Struktur wählen; falscher Einsatz von ARIA-Rollen statt nativem HTML.
Im Zusammenhang
Fragen, die dazu gestellt werden
Garantiert semantisches HTML ein besseres Ranking oder Barrierefreiheit?
Nein, es unterstützt eine sinnvolle Struktur; weitere Anforderungen bleiben bestehen.
Sind div-Elemente immer falsch?
Nein. Wo ein passendes semantisches Element vorhanden ist, sollte seine Bedeutung genutzt werden.
Alle Details und Hintergründe
Semantisches Markup nutzt HTML-Tags wie <header>, <nav>, <main>, <article>, <section> und korrekte Überschriftenhierarchien (h1–h6). Dies vermittelt Browsern, Suchmaschinen und Screenreadern die logische Bedeutung des Inhalts.
ELI5 – Einfach erklärt
Wie die Beschriftung von Umzugskartons: Statt auf jeden Karton nur „Box“ zu schreiben, schreibst du „Küche - Gläser“ darauf, damit jeder sofort weiß, was drin ist.
Warum das im Alltag wichtig ist
Hilfreich für verständliche Struktur, assistive Technologien und Wartbarkeit; weitere Prüfungen bleiben erforderlich.
Beispiel
Mögliches Beispiel: Eine Artikelseite verwendet passende Struktur- und Überschriftenelemente; nicht jeder div-Container muss ersetzt werden.
Fallstricke und Grenzen
- Übermäßige Verwendung unsemantischer <div>- und <span>-Elemente (Div-Suppe); Überschriften nach Schriftgröße statt nach logischer Struktur wählen; falscher Einsatz von ARIA-Rollen statt nativem HTML.
Entstehung & Geschichte
Der aktuelle HTML Living Standard beschreibt Elemente mit inhaltlicher Bedeutung. Semantische Auszeichnung ist Bestandteil von HTML und nicht erst durch HTML5 entstanden.
Anwendung im Mittelstand
- Mögliche Anwendung: Inhaltliche Struktur mit passenden HTML-Elementen auszeichnen und danach Navigation, Tastaturbedienung und assistive Ausgabe prüfen. Rankings und vollständige Barrierefreiheit sind dadurch nicht garantiert.
Verwandte Begriffe
- HTML5
- Accessibility
- SEO
- DOM
- Screenreader
- WAI-ARIA
- Clean Code
Passende Flow-alerta-Leistung
Websites & Web-AnwendungenWebsites & Web-AnwendungenPassendes Tool / Use Case
Praxisbeispiele ansehenMöglicher Use Case: Die Bedeutung von Überschriften, Navigation und Inhaltsbereichen prüfen und geeignete native HTML-Elemente verwenden.Quellen
- developer.mozilla.orgMDN, Semantics: Bedeutung von HTML-Elementen
- html.spec.whatwg.orgWHATWG, HTML Living Standard
Quellen geprüft am 09.10.2026. Redaktionelle Anwendungsbeispiele sind hypothetisch; kein Nachweis realer Kundenergebnisse.
Redaktionell geprüft am: