Semantisches HTML
Semantisches HTML beschreibt den Einsatz von HTML-Elementen, die den inhaltlichen Zweck eines Abschnitts oder Elements ausdrücken. So wird eine Website sowohl für Suchmaschinen als auch für assistive Technologien besser verständlich und navigierbar.
Bedeutung
-
Bessere Zugänglichkeit: Screenreader können Seitenstruktur und Inhalte korrekt interpretieren.
-
Strukturierte Navigation: Tastaturnutzer:innen finden sich durch klare Rollen und Hierarchien besser zurecht.
-
Wartbarkeit: Klare Auszeichnung verbessert langfristige Codepflege und Lesbarkeit.
Beispiele semantischer Elemente
| Zweck | Semantisches Element |
|---|---|
| Hauptinhalt | <main> |
| Navigation | <nav> |
| Artikel oder Blogpost | <article> |
| Abschnitt eines Texts | <section> |
| Überschriftenstruktur | <h1> bis <h6> |
| Schaltfläche | <button> statt <div onclick=""> |
Best Practices
-
Immer passende Tags verwenden
→ z. B.<button>statt<span>für klickbare Elemente. -
Korrekte Überschriften-Hierarchie einhalten
→ Keine Sprünge wie von<h1>direkt zu<h4>. -
Vermeidung rein visueller Markup-Strukturen
→ Keine<div>-Wüsten – lieber strukturierende Tags verwenden.
Herausforderungen
-
Fehlgebrauch von semantischen Elementen (z. B.
<article>für Navigation). -
Visuelle Designvorgaben können Entwickler:innen zu semantikfreien Workarounds verleiten.
-
Legacy-Code oder Baukastensysteme bieten manchmal keine semantisch sinnvolle Struktur von Haus aus.