<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>-Element in HTML stellt einleitende Inhalte dar, typischerweise eine Gruppe von einleitenden oder Navigationshilfen. Es kann einige Überschriftselemente enthalten, aber auch ein Logo, ein Suchformular, den Namen des Autors und andere Elemente.

Probieren Sie es aus

<header>
  <a class="logo" 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 von sectionspezifischem Inhalt, <main> oder einem Element mit derselben ARIA-Rolle wie die implizite ARIA-Rolle dieser Elemente geschachtelt ist, hat das <header>-Element dieselbe Bedeutung wie die seitenweite banner Landmarken-Rolle. Es definiert ein globales Seiten-Header, das 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 geschachtelt ist, verliert es seinen Landmarken-Status und stellt eine Gruppe von einleitenden oder navigativen Hilfen für den umgebenden Abschnitt dar. Es enthält normalerweise die Überschrift des umgebenden Abschnitts (ein h1 – h6 Element) und eine optionale Unterüberschrift, aber dies ist nicht erforderlich.

Wenn es innerhalb eines <article>, <main>, <section>, <nav>, <aside> oder eines Elements mit derselben ARIA-Rolle als die implizite ARIA-Rolle dieser Elemente platziert wird, hat das <header>-Element stattdessen die generic Rolle und wird nicht mehr als Landmarke betrachtet. In diesem Fall kann es nicht mit aria-label oder aria-labelledby gekennzeichnet werden.

Beispiele

Seitenkopf

html

<header>
  <h1>Main Page Title</h1>
  <img src="https://images.weserv.nl/?url=mdn-logo-sm.png&q=12&output=webp&max-age=110" alt="MDN logo" />
</header>

Ergebnis

Artikelkopf

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="http://www.akroncuttingedge.com//pFad.php?u=https%3A%2F%2Fexample.com%2Fthe-planet-earth%2F">Continue reading…</a></p>
</article>

Ergebnis

Technische Zusammenfassung

Inhaltskategorien	Flussinhalt, wahrnehmbarer Inhalt.
Erlaubter Inhalt	Flussinhalt, jedoch ohne `<header>` oder `<footer>` Nachkommen.
Tag-Auslassung	Keine, sowohl das Start- als auch das End-Tag sind obligatorisch.
Erlaubte Eltern	Jedes Element, das Flussinhalt akzeptiert. Beachten Sie, dass ein `<header>`-Element nicht ein Nachkomme eines `<address>`, `<footer>` oder eines weiteren `<header>`-Elements sein darf.
Implizite ARIA-Rolle	banner, oder generic wenn ein Nachkomme 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)