<header>

Das <header>-Element definiert einen Kopfbereich innerhalb eines Dokuments oder Abschnitts. Im Gegensatz zu einem einfachen <div> vermittelt es semantische Bedeutung und signalisiert Browsern und assistiven Technologien, dass hier einleitende Inhalte wie Navigation, Logo, Überschriften oder Suchfelder zu finden sind.

Steckbrief <header>

Kategorie: Semantik
Art: Block
Beispiele: 2
Browser: 5 von 5
E-Mail: 0 von 5
Stand: 03.02.2026

Grundlagen

Das <header>-Element ist ein semantisches Strukturelement aus HTML5. Du kannst mehrere <header>-Elemente pro Seite verwenden, etwa einen für die gesamte Seite und weitere für einzelne Artikel oder Abschnitte. Ein <header> enthält typischerweise Navigationsmenüs, Logos, Seitentitel, Breadcrumbs oder Suchformulare.

Wenn ein <header> als direktes Kind von <body> verwendet wird, erhält es automatisch die ARIA-Landmark-Rolle banner. Das ermöglicht Screenreader-Nutzern, direkt zum Hauptkopfbereich der Seite zu springen. Verschachtelte Header innerhalb von <article> oder <section> erhalten diese Rolle nicht automatisch.

Das Element kann beliebige Flow-Content-Elemente enthalten, einschließlich <nav>, <h1>-<h6>, aber darf selbst nicht innerhalb von <footer>, <address> oder einem anderen <header> verschachtelt werden.

Syntax

index.html

Grundsyntax

<header>
  <h1>Willkommen auf meiner Website</h1>
  <nav>
    <a href="/">Start</a>
    <a href="/blog">Blog</a>
  </nav>
</header>

Beispiele

2 Beispiele

Das klassische Anwendungsszenario ist der globale Seitenkopf mit Logo, Hauptnavigation und eventuell einem Suchfeld. Dieser Header wird typischerweise auf jeder Seite angezeigt.

index.html

Seitenheader mit Logo und Navigation

<header>
  <div class="logo">Meine Firma</div>
  <nav>
    <a href="/">Home</a>
    <a href="/produkte">Produkte</a>
    <a href="/kontakt">Kontakt</a>
  </nav>
</header>

Innerhalb eines <article>-Elements kannst du ein weiteres <header>-Element verwenden, um den Kopfbereich des Artikels zu kennzeichnen. Dieser Header enthält typischerweise Titel, Autor, Veröffentlichungsdatum oder Tags.

index.html

Artikel-Header mit Meta-Informationen

<article>
  <header>
    <h2>Einführung in HTML5 Semantik</h2>
    <p class="meta">
      Veröffentlicht am <time datetime="2026-02-03">3. Februar 2026</time>
      von <strong>Mario</strong>
    </p>
  </header>
  <p>Semantische HTML-Elemente verbessern die Struktur...</p>
</article>

Card-Header

Auch innerhalb von wiederverwendbaren Komponenten wie Cards kannst du <header> nutzen, um den Kopfbereich der Karte semantisch auszuzeichnen.

index.html

Header in einer Card-Komponente

<div class="card">
  <header>
    <h3>Premium-Paket</h3>
    <p>Unser beliebtestes Angebot</p>
  </header>
  <p>Alle Features inklusive, unbegrenzter Support...</p>
  <button>Jetzt kaufen</button>
</div>

Barrierefreiheit

Das <header>-Element ist ein wichtiger Bestandteil barrierefreier Websites. Wenn es als direktes Kind von <body> verwendet wird, erhält es automatisch die ARIA-Landmark-Rolle banner. Screenreader-Nutzer können so direkt zum Hauptkopfbereich der Seite springen, ohne die gesamte Seite durchlaufen zu müssen.

Wenn du mehrere <header>-Elemente auf einer Seite verwendest (etwa für Artikel oder Abschnitte), erhalten nur die Top-Level-Header die banner-Rolle. Die verschachtelten Header werden als generische Header-Bereiche behandelt.

Um die Navigation noch zugänglicher zu machen, solltest du innerhalb des Headers das <nav>-Element für Navigationsmenüs verwenden und aussagekräftige Überschriften einfügen. So können Screenreader-Nutzer die Struktur deiner Seite besser verstehen und schneller zum gewünschten Inhalt springen.

Häufige Fehler

3 Fehler

01 Nur einen Header pro Seite verwenden

Viele Entwickler glauben, dass nur ein <header>-Element pro Seite erlaubt ist. Das stimmt nicht. Du kannst mehrere Header verwenden, etwa einen globalen Seitenheader und weitere Header für einzelne Artikel oder Abschnitte. Nur die ARIA-Rolle banner wird automatisch nur dem Top-Level-Header zugewiesen.

02 Header in header/footer verschachteln

Ein <header>-Element darf nicht innerhalb eines anderen <header>- oder <footer>-Elements verschachtelt werden. Auch die Platzierung innerhalb von <address> ist nicht erlaubt. Achte darauf, dass deine Header-Struktur korrekt hierarchisch aufgebaut ist.

03 Header mit div verwechseln

Nur weil ein Bereich oben auf der Seite steht, muss es nicht zwingend ein <header> sein. Wenn der Bereich keine einleitenden Inhalte wie Navigation, Logo oder Überschriften enthält, ist ein einfaches <div> die bessere Wahl. Das <header>-Element sollte semantisch sinnvoll eingesetzt werden, nicht aus rein visuellen Gründen.

Browser-Kompatibilität

5 von 5

Das header-Element wird von allen modernen Browsern vollständig unterstützt, einschließlich der automatischen ARIA-Landmark-Rolle banner.

Chrome

Komplett
Firefox

Komplett
Safari

Komplett
Edge

Komplett
Opera

Komplett

Email-Kompatibilität

0 von 5

In HTML-E-Mails solltest du das header-Element vermeiden. Viele E-Mail-Clients ignorieren semantische HTML5-Elemente vollständig oder rendern sie inkonsistent. Verwende stattdessen table-basierte Layouts und div-Elemente mit Inline-CSS.

Apple Mail

Teilweise

Wird als Block-Element gerendert, semantische Bedeutung geht verloren.
Gmail

Keine

Semantische HTML5-Elemente werden ignoriert oder entfernt.
Outlook

Keine

Outlook entfernt semantische HTML5-Elemente vollständig.
Thunderbird

Teilweise

Wird angezeigt, aber ohne semantische Rolle.
Yahoo Mail

Keine

Semantische Elemente werden nicht unterstützt.

einmal die Woche, kostenlos

Neue Artikel und Videos, was sich auf der Lernplattform tut, und ab und zu ein Sonderpreis zum Kursstart. Kurz genug, dass du es auch liest.

Zuletzt verschickt · KW 40

Einmal alles neu, und die Lernplattform ist da

<header>

Grundlagen

Syntax

Beispiele

Card-Header

Barrierefreiheit

Häufige Fehler

Browser-Kompatibilität

Email-Kompatibilität

Newsletter