<header>: Das Header-Element

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Das <header>-Element HTML repräsentiert einführende Inhalte, typischerweise eine Gruppe von einleitenden oder navigativen Hilfsmitteln. Es kann einige Überschriftselemente, aber auch ein Logo, ein Suchformular, einen Autorennamen und andere Elemente enthalten.

Probieren Sie es aus

Verwendungshinweise

Das <header>-Element hat dieselbe Bedeutung wie die seitenweite banner Landmarkenrolle, es sei denn, es ist innerhalb eines sectioning-Inhalts verschachtelt. Dann ist das <header>-Element keine Landmarke.

Das <header>-Element kann ein globales Website-Header definieren, das als banner im Accessibility-Baum beschrieben wird. Es umfasst in der Regel ein Logo, den Firmennamen, eine Suchfunktion und möglicherweise die globale Navigation oder einen Slogan. Es befindet sich normalerweise oben auf der Seite.

Andernfalls ist es ein section im Accessibility-Baum und enthält in der Regel die Überschrift der umgebenden Sektion (ein h1h6-Element) und eine optionale Unterüberschrift, aber dies ist nicht erforderlich.

Historische Nutzung

Das <header>-Element existierte ursprünglich ganz am Anfang von HTML für Überschriften. Es ist auf der allerersten Website zu sehen. Irgendwann wurden Überschriften zu <h1> bis <h6>, wodurch <header> frei wurde, eine andere Rolle zu übernehmen.

Attribute

Dieses Element enthält nur die globalen Attribute.

Barrierefreiheit

Das <header>-Element definiert eine banner Landmarke, wenn sein Kontext das <body>-Element ist. Das HTML-Header-Element wird nicht als Banner-Landmarke betrachtet, wenn es ein Nachkomme eines <article>, <aside>, <main>, <nav> oder <section>-Elements ist.

Beispiele

Seiten-Header

html
<header>
  <h1>Main Page Title</h1>
  <img src="mdn-logo-sm.png" alt="MDN logo" />
</header>

Ergebnis

Artikel-Header

html
<article>
  <header>
    <h2>The Planet Earth</h2>
    <p>
      Posted on Wednesday, <time datetime="2017-10-04">4 October 2017</time> by
      Jane Smith
    </p>
  </header>
  <p>
    We live on a planet that's blue and green, with so many things still unseen.
  </p>
  <p><a href="https://example.com/the-planet-earth/">Continue reading…</a></p>
</article>

Ergebnis

Technische Zusammenfassung

Inhaltskategorien Fließende Inhalte, fühlbare Inhalte.
Zulässiger Inhalt Fließende Inhalte, aber ohne <header>- oder <footer>-Nachkommen.
Tag-Auslassung Keine, sowohl der startende als auch der endende Tag sind obligatorisch.
Erlaubte Eltern Jedes Element, das fließende Inhalte akzeptiert. Beachten Sie, dass ein <header>-Element kein Nachkomme eines <address>, <footer> oder eines anderen <header>-Elements sein darf.
Implizite ARIA-Rolle Banner, oder generisch wenn ein Nachkomme eines article, aside, main, nav oder section-Elements, oder eines Elements mit role=article, complementary, main, navigation oder region
Erlaubte ARIA-Rollen group,presentation oder none
DOM-Schnittstelle [`HTMLElement`](/de/docs/Web/API/HTMLElement)

Spezifikationen

Specification
HTML
# the-header-element

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
header

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Siehe auch