<header>
Zuletzt aktualisiert am 3. Februar 2026
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.
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
<header>
<h1>Willkommen auf meiner Website</h1>
<nav>
<a href="/">Start</a>
<a href="/blog">Blog</a>
</nav>
</header>Beispiele
Seitenheader mit Navigation und Logo
Das klassische Anwendungsszenario ist der globale Seitenkopf mit Logo, Hauptnavigation und eventuell einem Suchfeld. Dieser Header wird typischerweise auf jeder Seite angezeigt.
<header>
<div class="logo">Meine Firma</div>
<nav>
<a href="/">Home</a>
<a href="/produkte">Produkte</a>
<a href="/kontakt">Kontakt</a>
</nav>
</header>Artikel-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.
<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.
<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
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.
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.
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
Das header-Element wird von allen modernen Browsern vollständig unterstützt, einschließlich der automatischen ARIA-Landmark-Rolle banner.
| Client | Unterstützung | Hinweise |
|---|---|---|
| Chrome | Komplett | — |
| Firefox | Komplett | — |
| Safari | Komplett | — |
| Edge | Komplett | — |
| Opera | Komplett | — |
Email-Kompatibilität
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.
| Client | Unterstützung | Hinweise |
|---|---|---|
| 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. |
Verwandte Elemente
Bleib auf dem Laufenden
Erhalte neue Inhalte direkt in dein Postfach
Was erwartet dich?
Neue Artikel & Videos
Wenn ich was Neues veröffentliche, erfährst du's hier zuerst.
Plattform & Kurs-Updates
Neue Kurse, Referenz-Updates und gelegentlich Sonderpreise zum Launch.
Einmal die Woche in deinem Postfach
Kurz, auf den Punkt, kein Spam.