<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> HTML-Element repräsentiert einleitende Inhalte, typischerweise eine Gruppe einleitender oder navigationsbezogener Hilfsmittel. Es kann einige Überschriftenelemente enthalten, aber auch ein Logo, ein Suchformular, einen Autorennamen 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: #000 2px 2px 0.2rem;
}

header > h1 {
  margin-bottom: 0;
}

header > time {
  font: italic 0.7rem sans-serif;
}

Verwendungshinweise

Das <header>-Element hat eine identische Bedeutung wie die websiteweite banner Landmarke, es sei denn, es ist in gliedernden Inhalten verschachtelt. In diesem Fall ist das <header>-Element keine Landmarke.

Das <header>-Element kann einen globalen Site-Header definieren, der im Accessibility-Tree als banner beschrieben wird. Es enthält normalerweise ein Logo, den Firmennamen, eine Suchfunktion und möglicherweise die globale Navigation oder einen Slogan. Es befindet sich im Allgemeinen oben auf der Seite.

Andernfalls ist es im Accessibility-Tree ein section und enthält üblicherweise die Überschrift der umliegenden Sektion (ein h1- bis h6-Element) und eine optionale Unterüberschrift, dies ist jedoch nicht erforderlich.

Historische Verwendung

Das <header>-Element existierte ursprünglich am Anfang von HTML zur Darstellung von Überschriften. Es ist auf der allerersten Webseite zu sehen. Irgendwann entwickelten sich Überschriften zu <h1> bis <h6>, wodurch <header> eine andere Rolle übernehmen konnte.

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 Nachfolger 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 Flussinhalt, wahrnehmbarer Inhalt.
Erlaubter Inhalt Flussinhalt, aber ohne <header> oder <footer> Nachkommen.
Tag-Auslassung Keine, sowohl das öffnende als auch das schließende Tag sind erforderlich.
Erlaubte Eltern Jedes Element, das Flussinhalt akzeptiert. Beachten Sie, dass ein <header>-Element kein Nachfolger eines <address>, <footer> oder eines anderen <header>-Elements sein darf.
Implizite ARIA-Rolle banner oder generic, wenn es ein Nachfolger eines article, aside, main, nav oder section Elements ist, oder ein Element mit article, complementary, main, navigation oder region Rolle ist.
Erlaubte ARIA-Rollen group, presentation oder none
DOM Schnittstelle [`HTMLElement`](/de/docs/Web/API/HTMLElement)

Spezifikationen

Specification
HTML
# the-header-element

Browser-Kompatibilität

Siehe auch