<header> HTML-Header-Element
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.
Das <header> HTML-Element repräsentiert einleitende Inhalte, typischerweise eine Gruppe von einleitenden oder navigativen Hilfsmitteln. 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: black 2px 2px 0.2rem;
}
header > h1 {
margin-bottom: 0;
}
header > time {
font: italic 0.7rem sans-serif;
}
Verwendungshinweise
Wenn es nicht in sektionsbildenden Inhalten, <main> oder in einem Element mit derselben ARIA-Rolle wie die implizite ARIA-Rolle dieser Elemente verschachtelt ist, dann hat das <header>-Element die gleiche Bedeutung wie die seitenweite banner-Landmarkenrolle. Es definiert einen globalen Seitenkopf, der normalerweise ein Logo, den Firmennamen, die 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 in den genannten Elementen verschachtelt ist, verliert es seinen Landmarkenstatus und stellt eine Gruppe von einleitenden oder navigativen Hilfselementen 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.
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 das <header>-Element frei war, 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.
Wenn es innerhalb eines <article>, <main>, <section>, <nav>, <aside> oder eines Elements mit derselben ARIA-Rolle wie die implizite ARIA-Rolle dieser Elemente platziert wird, hat das <header>-Element stattdessen die generic-Rolle und gilt nicht mehr als Landmarke. In diesem Fall kann es nicht mit aria-label oder aria-labelledby beschriftet werden.
Beispiele
Seitenkopf
<header>
<h1>Main Page Title</h1>
<img src="mdn-logo-sm.png" alt="MDN logo" />
</header>
Ergebnis
Artikelkopf
<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. |
|---|---|
| Zulässiger Inhalt |
Flussinhalt, jedoch ohne <header>- oder
<footer>-Nachkommen.
|
| Tag-Auslassung | Keine, sowohl das öffnende als auch das schließende Tag sind verpflichtend. |
| Zulässige Eltern |
Jedes Element, das
Flussinhalt 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
article,
complementary,
main,
navigation
oder
region-Rolle
|
| Zulässige ARIA-Rollen |
group, presentation oder
none
|
| DOM-Schnittstelle | [`HTMLElement`](/de/docs/Web/API/HTMLElement) |
Spezifikationen
| Spezifikation |
|---|
| HTML # the-header-element |