header, nav, main, footer: Die großen Vier
Strukturieren Sie Ihre Seite mit den Bereichen, die Nutzer erwarten.
header, nav, main, footer: Die großen Vier ist eine kostenlose Web Accessibility Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Web Accessibility Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Web Accessibility Academy-Kurs umfasst insgesamt 4 Lektionen.
Eine Karte für Ihre Seite
Sehende Nutzerinnen und Nutzer überblicken eine Seite auf einen Blick. Nutzerinnen und Nutzer von Screenreadern brauchen eine Karte, und HTML5-landmark-Elemente zeichnen diese für sie.
Die vier großen Bereiche
Vier Elemente decken die meisten Seiten ab: header, nav, main und footer. Zusammen teilen sie Ihr Layout in Bereiche auf, zwischen denen Nutzerinnen und Nutzer springen können. 🗺️
header: Das obere Banner
Ein seitenweiter header enthält den Namen Ihrer Website, das Logo und einleitende Inhalte. Screenreader stellen ihn als Bannerbereich bereit.
<header>
<h1>CoddyKit</h1>
</header>nav: Hier befinden sich die Links
Umschließen Sie Ihre wichtigsten Links mit nav. Dadurch erkennen assistive Technologien, dass dieser Block der Navigation dient, sodass Nutzerinnen und Nutzer ihn schnell finden oder überspringen können.
<nav>
<a href="/">Home</a>
<a href="/docs">Docs</a>
</nav>main: Der eigentliche Inhalt
Das main-Element umschließt den einzigartigen Inhalt der Seite. Es ist das Ziel, das für Nutzerinnen und Nutzer am wichtigsten ist.
<main>
<h1>Article title</h1>
<p>Body...</p>
</main>footer: Der untere Bereich
Ein seitenweiter footer enthält Urheberrechtshinweise, rechtliche Links und Kontaktinformationen. Screenreader kündigen ihn als Inhaltsinformationsbereich an.
<footer>
<p>© 2026 CoddyKit</p>
</footer>Implizite Rollen gratis erhalten
Diese Tags enthalten integrierte ARIA-roles, sodass header zum Banner und nav zur Navigation wird – ganz ohne zusätzliche Attribute.
Der Kontext verändert die Rolle
Ein header innerhalb eines Artikels ist nur die Kopfzeile eines Abschnitts, nicht das Banner der Seite. Nur ein übergeordnetes header-Element zählt als Banner-Landmark.
Warum div das nicht kann
Ein div hat keine Rolle, daher sieht ein Screenreader nichts, zu dem er springen könnte. Landmark-Tags machen unsichtbare Struktur zu echter Navigation.
<div class="nav">...</div>Eine ganze Seite kartiert
Ordnen Sie die vier Elemente gemeinsam an, und Nutzerinnen und Nutzer von Screenreadern erkennen sofort die Struktur Ihrer page, bevor sie ein einziges Wort gelesen haben. 🎯
<header>...</header>
<nav>...</nav>
<main>...</main>
<footer>...</footer>Kostenlos direkt vorspringen
Mit Landmarks können Nutzerinnen und Nutzer den header überspringen und direkt zu main jumpen, sodass wiederholte Links auf jeder Seite entfallen.
Kurztest
Welches Landmark umschließt den einzigartigen Hauptinhalt einer Seite?
Zusammenfassung: Die vier großen Bereiche
Sie haben gelernt, dass header, nav, main und footer Nutzerinnen und Nutzern von Screenreadern eine Karte bieten. Native Tags liefern Landmark-Rollen kostenlos mit. 🙌
Lerne HTML mit einem KI-Tutor — kostenlos
Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.
- Kurse
- 30
- Lektionen
- 120
Häufig gestellte Fragen
Ist die Lektion „header, nav, main, footer: Die großen Vier“ kostenlos?
Ja — der vollständige Text von „header, nav, main, footer: Die großen Vier“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Web Accessibility Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Web Accessibility Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „header, nav, main, footer: Die großen Vier“?
Strukturieren Sie Ihre Seite mit den Bereichen, die Nutzer erwarten. Du übst Web Accessibility Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Web Accessibility Academy zu starten?
Keine Vorkenntnisse erforderlich. Web Accessibility Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.
Wie lange dauert die Lektion „header, nav, main, footer: Die großen Vier“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Web Accessibility Academy-Lektion Code schreiben und ausführen?
Ja. Jede Web Accessibility Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- header, nav, main, footer: Die großen Vier
- Inhalte in main und nur ein main einfügen
- Mehrere Bereiche mit aria-label benennen
- Navigation über Orientierungspunkte: So springen Nutzer umher