Anordnung

HTML-Struktur und Semantik: Warum Element-Semantik zählt

Bei modernen Webseiten ist es wichtig, Inhalte nicht nur optisch, sondern auch semantisch korrekt zu strukturieren. Damit sind Elemente gemeint, die von Haus aus eine Bedeutung vermitteln – statt neutraler <div>-Container.

Semantische HTML-Elemente beschreiben die Funktion eines Inhaltsblocks:
Sie geben Browsern, Suchmaschinen, Screenreadern und Entwicklern verständliche Hinweise darauf, was für ein Inhalt dort steht. Das verbessert:

  • Barrierefreiheit/Accessibility
  • SEO
  • die Wartbarkeit (für dich und andere Entwickler)

Wichtige semantische Elemente und deren Zweck:

  • <main>
    • Hauptinhalt der Seite, einmal pro Seite
    • Enthält das, was das Hauptthema/Aufgabe der Seite ist (nicht Navigation, Header, Footer).
  • <header>
    • Einleitender Bereich eines Dokuments oder Abschnitt
    • Oft Logo, Titel, Navigation – meist am Anfang der Seite oder eines Artikels.
  • <nav>
    • Bereich für Navigationselemente
    • Zum Beispiel das Hauptmenü, Sidebar-Nav, Fußzeilenmenü
    • Screenreader erkennen <nav> und ermöglichen direktes Springen zu Navigationsbereichen.
  • <article>
    • Eigenständiger, in sich geschlossener Inhalt
    • z.B. Blogartikel, Foren-Beitrag, News, FAQ-Abschnitt
    • Kann auch verschachtelt sein!
  • <section>
    • Thematisch zusammengehörender Bereich innerhalb eines Dokuments
    • Zum Beispiel ein Kapitel, ein Abschnitt zu einem bestimmten Thema
    • Nutze <section>, wenn ein Bereich eine eigene Überschrift bekommt.
  • <aside>
    • Inhalt, der indirekt mit dem Seiteninhalt zusammenhängt
    • z.B. Sidebar, Randnotizen, verwandte Themen, Anzeigen.
  • <footer>
    • Fußzeile eines Dokuments oder Abschnitts
    • z.B. Impressum, Copyright, Navigationslinks am Seitenende

Warum nicht einfach <div>?

  • <div> markiert keine inhaltliche Bedeutung, es ist ein rein "technischer" Block.
  • <main>, <article>, <section> etc. sind explizite Keywords für Menschen und Maschinen.
  • Ein Screenreader kann dem User sagen „Navigiere zum Hauptinhalt“ – über ein <div> ist das nicht möglich.
  • Google & Co. erkennen relevanten Content besser und können die Seite besser indexieren.

Wann <div>?

Verwende <div> nur für Layout-Zwecke – z.B. als flex-Container, falls es wirklich semantisch keine bessere Option gibt.