0Pricing
HTML Academy · Lektion

header nav main und footer

Strukturieren Sie die wichtigsten Bereiche einer Seite mit semantischen Tags

header nav main und footer ist eine kostenlose HTML 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 HTML Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.

HTML5-Landmark-Elemente

HTML5 führte Landmark-Elemente ein, die Seitenbereiche definieren:

  • <header> — einleitende Inhalte oder Navigation
  • <nav> — Navigationslinks
  • <main> — der primäre, einzigartige Inhalt
  • <footer> — Informationen im Fußbereich

Sie ersetzen allgemeine <div>s durch eine aussagekräftige Struktur.

Das header-Element

Das <header>-Element enthält einleitende Inhalte:

<header>
  <a href="/" class="logo">
    <img src="logo.svg" alt="Company name">
  </a>
  <nav>...</nav>
  <button>Sign In</button>
</header>
<!-- header can appear multiple times: page header, article header -->
<!-- But only one page-level header per page is recommended -->

Das nav-Element

Das <nav>-Element umfasst Navigationslinks:

<nav aria-label="Main navigation">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/products">Products</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>
<!-- Use aria-label to distinguish multiple navs -->
<!-- Not every group of links is a nav — only major navigation -->

Mehrere nav-Elemente

Eine Seite kann mehrere <nav>-Elemente enthalten — kennzeichnen Sie jedes davon:

<nav aria-label="Main navigation">...</nav>
<nav aria-label="Breadcrumb">...</nav>
<nav aria-label="Footer links">...</nav>
<!-- aria-label tells screen reader users what each nav is for -->
<!-- Screen readers list landmarks — unique labels help navigation -->

Das main-Element

Das <main>-Element kennzeichnet den primären, für diese Seite einzigartigen Inhalt:

<main id="main-content">
  <h1>HTML5 Landmark Elements</h1>
  <p>Learn about semantic page structure...</p>
</main>
<!-- Rules:
  - Only ONE main element per page
  - Should not be a descendant of header, footer, aside, nav
  - id="main-content" enables skip links -->
<!-- Assistive tech users jump directly to main -->

Das footer-Element

Das <footer>-Element umfasst Informationen im Fußbereich:

<footer>
  <p>&copy; 2025 CoddyKit. All rights reserved.</p>
  <nav aria-label="Footer navigation">
    <a href="/privacy">Privacy Policy</a>
    <a href="/terms">Terms of Service</a>
  </nav>
</footer>
<!-- footer can appear multiple times: page footer, article footer -->
<!-- Page footer typically has copyright, links, contact -->

Seitenskelett

Eine vollständige semantische Seitenstruktur:

<body>
  <header>
    <a href="/"><img src="logo.svg" alt="Site name"></a>
    <nav aria-label="Main">...</nav>
  </header>

  <main id="main-content">
    <h1>Page Title</h1>
    <p>Primary content here.</p>
  </main>

  <aside>Related content</aside>

  <footer>
    <p>&copy; 2025 Company</p>
  </footer>
</body>

Link zum Überspringen der Navigation

Fügen Sie einen Skip-Link hinzu, damit Tastaturbenutzer die Navigation überspringen können:

<a href="#main-content" class="skip-link">Skip to main content</a>

<header>... navigation ...</header>

<main id="main-content" tabindex="-1">
  <h1>Page Heading</h1>
</main>

/* CSS: */
.skip-link {
  position: absolute; top: -100%;
  background: #0070f3; color: white; padding: 0.5rem;
}
.skip-link:focus { top: 0; }

Landmark-Rollen

HTML5-Landmark-Elemente werden auf ARIA-Landmark-Rollen abgebildet:

  • <header> → role="banner" (nur auf Seitenebene)
  • <nav> → role="navigation"
  • <main> → role="main"
  • <footer> → role="contentinfo" (nur auf Seitenebene)
  • <aside> → role="complementary"

header und footer innerhalb von Abschnitten

header und footer können innerhalb von <article> und <section> vorkommen:

<article>
  <header>
    <h2>Article Title</h2>
    <p>By Jane Smith | March 2024</p>
  </header>
  <p>Article content...</p>
  <footer>
    <p>Tags: HTML, CSS</p>
  </footer>
</article>
<!-- In this context, header/footer are NOT banner/contentinfo roles -->
<!-- They are generic sections within the article -->

Häufige Fehler

Vermeiden Sie diese Fehler bei semantischen Landmark-Elementen:

  • <nav> für jede beliebige Gruppe von Links verwenden
  • Mehrere <main>-Elemente auf einer Seite
  • <main> innerhalb von <header> oder <nav> platzieren
  • <footer> für Inhalte verwenden, die nicht zum Fußbereich gehören

Schnelltest

Wie viele main-Elemente sollte eine Seite enthalten?

Zusammenfassung: header, nav, main und footer

Das Wichtigste zu Landmark-Elementen:

  • <header> — einleitende Inhalte; kann pro Abschnitt wiederholt werden
  • <nav> — wichtige Navigation; bei mehreren Exemplaren mit aria-label kennzeichnen
  • <main> — einzigartiger primärer Inhalt; genau einmal pro Seite
  • <footer> — Inhalte im Fußbereich; kann pro Abschnitt wiederholt werden
  • Fügen Sie einen Skip-Link mit dem Ziel id="main-content" hinzu

Häufig gestellte Fragen

Ist die Lektion „header nav main und footer“ kostenlos?

Ja — der vollständige Text von „header nav main und footer“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des HTML Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „header nav main und footer“?

Strukturieren Sie die wichtigsten Bereiche einer Seite mit semantischen Tags Du übst HTML 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 HTML Academy zu starten?

Keine Vorkenntnisse erforderlich. HTML 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 und footer“?

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 HTML Academy-Lektion Code schreiben und ausführen?

Ja. Jede HTML 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

  1. header nav main und footer
  2. Das article-Element: eigenständige Inhalte
  3. Das section-Element gegenüber div
  4. time address und mark
← Zurück zu HTML Academy