Semantisches HTML

TL;DR

Semantisches HTML verwendet die richtigen HTML-Elemente für ihren Zweck – button für Buttons, nav für Navigation. Es ist die Basis für Barrierefreiheit und SEO.

Was ist Semantisches HTML?

Semantisches HTML bedeutet, HTML-Elemente entsprechend ihrer Bedeutung zu verwenden, nicht nur ihrem Aussehen. Ein <button> ist ein Button, nicht ein gestyltes <div>. Eine Navigation ist <nav>, nicht ein <div class="navigation">.

Wichtige semantische Elemente

• Struktur: header, main, footer, section, article, aside
• Navigation: nav
• Überschriften: h1 bis h6 (hierarchisch!)
• Listen: ul, ol, li
• Text: p, strong, em, blockquote
• Interaktiv: button, a, input, select
• Tabellen: table, thead, tbody, th, td

Warum semantisches HTML wichtig ist

• Barrierefreiheit: Screenreader verstehen die Struktur
• SEO: Suchmaschinen verstehen den Inhalt
• Wartbarkeit: Code ist selbsterklärend
• Standardverhalten: Buttons, Links funktionieren ohne JavaScript

Häufige Fehler

• <div onclick> statt <button>
• <span> für Links statt <a>
• <div class="header"> statt <header>
• Überschriften nach Größe, nicht Hierarchie
• <br> für Abstände statt CSS

Semantik und Nachhaltigkeit

Semantisches HTML ist nachhaltiger:

• Weniger Code (keine ARIA-Kompensation nötig)
• Eingebaute Funktionalität (weniger JavaScript)
• Bessere Performance auf älteren Geräten
• Zukunftssicher (Standards statt Custom-Lösungen)

Fazit

Semantisches HTML ist kein Extra-Aufwand – es ist die richtige Art, HTML zu schreiben. Es macht Websites barrierefrei, SEO-freundlich und wartbar. Wenn du das nicht tust, machst du mehr Arbeit, nicht weniger.