<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 ⁨Juli 2015⁩.

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

Probieren Sie es aus

<header>  <a href="#">Cute Puppies Express!</a></header><article>  <header>    <h1>Beagles</h1>    <time>08.12.2014</time>  </header>  <p>    I love beagles <em>so</em> much! Like, really, a lot. They’re adorable and    their ears are so, so snugly soft!  </p></article>

.logo {  background: left / cover    url("/shared-assets/images/examples/puppy-header.jpg");  display: flex;  height: 120px;  align-items: center;  justify-content: center;  font:    bold calc(1em + 2 * (100vw - 120px) / 100) "Dancing Script",    fantasy;  color: #ff0083;  text-shadow: black 2px 2px 0.2rem;}header > h1 {  margin-bottom: 0;}header > time {  font: italic 0.7rem sans-serif;}

Nutzungshinweise

Wenn es nicht innerhalb vonSectioning-Content,<main>, oder einem Element mit derselben ARIA-Rolle wie die implizite ARIA-Rolle dieser Elemente eingebettet ist, hat das<header> Element eine identische Bedeutung zu der site-weitenbanner-Rolle. Es definiert eine globale Website-Header, welcher normalerweise ein Logo, den Firmennamen, eine Suchfunktion und möglicherweise die globale Navigation oder einen Slogan enthält. Es befindet sich in der Regel am oberen Rand der Seite.

Andernfalls, wenn es innerhalb der genannten Elemente verschachtelt ist, verliert es seinen Landmark-Status und repräsentiert eine Gruppe von einleitenden oder Navigationshilfen für den umgebenden Abschnitt. Es enthält in der Regel die Überschrift des umgebenden Abschnitts (einh1 –h6 Element) und eine optionale Unterüberschrift, aber dies istnicht erforderlich.

Wenn es innerhalb eines<article>,<main>,<section>,<nav>,<aside> oder eines Elements mit derselben ARIA-Rolle wie die implizite ARIA-Rolle dieser Elemente platziert ist, hat das<header> Element stattdessen diegeneric-Rolle und wird nicht mehr als Landmark angesehen. In diesem Fall kann es nicht mitaria-label oderaria-labelledby gekennzeichnet werden.

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	Flussinhalt,fühlbarer Inhalt.
Erlaubte Inhalte	Flussinhalt, jedoch ohne`<header>` oder`<footer>` Nachkommen.
Tag-Auslassung	Keine, sowohl das Start- als auch das End-Tag sind obligatorisch.
Erlaubte Eltern	Jedes Element, dasFlussinhalt akzeptiert. Beachten Sie, dass ein`<header>` Element kein Nachkomme eines`<address>`,`<footer>` oder eines anderen`<header>` Elements sein darf.
Implizite ARIA-Rolle	banner, odergeneric wenn Nachkommen eines`article`,`aside`,`main`,`nav` oder`section` Elements oder eines Elements mit`article`,`complementary`,`main`,`navigation` oder`region` Rolle
Erlaubte ARIA-Rollen	`group`,`presentation` oder`none`
DOM-Schnittstelle	[`HTMLElement`](/de/docs/Web/API/HTMLElement)