Semantisches HTML5
Semantisches HTML beschreibt die Bedeutung von Inhalten – nicht nur das Aussehen. Das verbessert Barrierefreiheit, SEO und Wartbarkeit.
Die wichtigsten Struktur-Elemente
<header> Kopfbereich mit Logo/Navigation
<nav> Hauptnavigation
<main> Hauptinhalt (nur einmal)
<article> eigenständiger Inhalt (Blogpost, Artikel)
<section> thematische Gruppe
<aside> Nebeninhalt (Sidebar)
<footer> Fußbereich
<figure> Abbildung mit <figcaption>Warum Semantik?
Screenreader können Seiten strukturiert vorlesen. Suchmaschinen verstehen Inhalte besser. Code wird selbstdokumentierend. <div> und <span> solltest du nur verwenden, wenn kein semantisches Element passt.
Weitere Empfehlungen
Ein <h1> pro Seite, alt-Texte bei Bildern, lang="de" im html-Tag, korrekte Link-Texte statt „hier klicken". Überschriften hierarchisch (h1 → h2 → h3) und nie Stufen überspringen.
Weiterlesen: Responsive Design · HTML & CSS Schnellreferenz · Git-Grundlagen