Semantic HTML bedeutet: Sie verwenden HTML-Elemente so, wie sie inhaltlich gedacht sind – also nicht nur zur Darstellung, sondern zur bedeutungsgetreuen Strukturierung von Inhalten. Das erleichtert Maschinen und Menschen gleichermaßen die Orientierung auf Ihrer Website.
Warum ist semantisches HTML wichtig?
Die semantische Auszeichnung bildet die Basis für:
- Barrierefreiheit, weil Screenreader Inhalte korrekt interpretieren können
- SEO, weil Suchmaschinen die Struktur und Relevanz besser erfassen
- Konsistente Darstellung, weil Browser die Inhalte „richtig“ rendern
- Wartbarkeit, weil klarer Code auch für Entwickler leichter verständlich ist
Beispiele für semantische HTML-Elemente
Statt eines allgemeinen <div> sollten Sie – wo möglich – spezifische Tags verwenden:
| Zweck | Nicht-semantisch | Semantisch korrekt |
|---|---|---|
| Hauptinhalt | <div id="main"> | <main> |
| Navigation | <div class="nav"> | <nav> |
| Überschrift | <div class="title"> | <h1> bis <h6> |
| Artikel/Blogpost | <div class="article"> | <article> |
| Fußbereich | <div class="footer"> | <footer> |
Der Klicklounge-Tipp: Strukturieren Sie Inhalte klar – mit Überschriftenhierarchien, Listen, Absätzen, Formularfeldern und Tabellen. Je mehr Klarheit im Code, desto besser für Ihre Besucher und Ihre Sichtbarkeit bei Google.