HTML Element - header

Beispiel

<header>
<h1>Hauptüberschrift der Seite</h1>
<p>Autorin: Maximiliane Mustermann</p>
</header>

Definition und Verwendung

Das header-Element dient als Container für einleitende Inhalte eines Dokuments oder eines Abschnitts. Es kann beispielsweise Überschriften oder Navigationsbereiche enthalten.

Im header-Element dürfen andere HTML-Elemente wie Überschriften h1–h6, Bilder img oder Absätze p enthalten sein.

In einem Dokument dürfen mehrere header-Elemente vorkommen.

Beispiel

<header>
<h1>Wer ist das World Wide Web Consortium?</h1>
<p>Autorin: Maximiliane Mustermann <time datetime="2026-02-14">14.02.2026</time></p>
</header>

<article>
<header>
<a href="https://www.w3.org/policies/logos/" target="_blank"><img src="images/w3c-logo.png" alt="Logo des W3C"></a>
<h2>World Wide Web Consortium (W3C)</h2>
<p>
Das World Wide Web Consortium <abbr>W3C</abbr> entwickelt offene Standards für das Web und definiert unter anderem die offizielle Spezifikation von HTML. Diese Standards stellen sicher, dass Webinhalte plattformübergreifend einheitlich interpretiert werden.</p>
<p>Arbeitsgruppen im <abbr>W3C</abbr>, wie die unten aufgeführte, schaffen dazu die entsprechenden Empfehlungen.</p>
</header>
<h3>Web Accessibility Initiative <abbr>WAI</abbr> im <abbr>W3C</abbr></h3>
<p>Die <dfn>ARIA-Spezifikation</dfn> erweitert HTML um zusätzliche Rollen und Attribute, um Inhalte für assistive Technologien eindeutig beschreibbar zu machen. Sie kommt insbesondere dann zum Einsatz, wenn semantische HTML-Elemente allein nicht ausreichen.</p>
</article>

Attribute

Attribute erweitern Elemente um zusätzliche Eigenschaften oder Informationen und beeinflussen deren Bedeutung, Verhalten oder Darstellung. Sie bestehen in der Regel aus einem Attributnamen und einem zugehörigen Wert, wobei die zulässigen Attribute vom jeweiligen Element abhängen und teils allgemein, teils elementbezogen definiert sind.

Eine besondere Gruppe bilden die aria-*-Attribute, die zur Unterstützung der Barrierefreiheit zusätzliche Informationen für assistive Technologien bereitstellen.

Unterstützung von Global- und Event-Attributen

Das header-Tag unterstützt auch Global- und Event-Attribute.

Standardbrowser CSS

Webbrowser wenden auf viele Elemente vordefinierte CSS-Stile an, die eine grundlegende Struktur und Lesbarkeit sicherstellen. Umfang und Ausgestaltung dieser Standardstile können je nach Browser variieren, etwa in Bezug auf Abstände, Schriftgrößen oder die Darstellung einzelner Elemente.

header {
display: block;
}

Browserunterstützung

Die Unterstützung von Elementen und Attributen ist in den gängigen modernen Browsern weitgehend einheitlich gewährleistet. Unterschiede können dennoch in Details, im Einführungszeitpunkt neuer Funktionen oder bei experimentellen Features auftreten.