<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>-Element von HTML repräsentiert einleitende Inhalte, üblicherweise eine Gruppe einleitender oder der Navigation dienender Elemente. Es kann Überschriftenelemente, aber auch ein Logo, ein Suchformular, einen Autorennamen und andere Elemente enthalten.
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;
}
Attribute
Dieses Element unterstützt nur die globalen Attribute.
Verwendungshinweise
Wenn das <header>-Element nicht innerhalb von gliederndem Inhalt, <main> oder einem Element mit derselben ARIA-Rolle wie der impliziten ARIA-Rolle dieser Elemente verschachtelt ist, hat es dieselbe Bedeutung wie die seitenweite Landmark-Rolle banner. Es definiert einen globalen Seitenkopf, der üblicherweise ein Logo, einen Unternehmensnamen und eine Suchfunktion sowie möglicherweise die globale Navigation oder einen Slogan enthält. In der Regel befindet es sich am Anfang der Seite.
Ist das <header>-Element dagegen innerhalb eines der genannten Elemente verschachtelt, verliert es seinen Landmark-Status und repräsentiert eine Gruppe einleitender oder der Navigation dienender Elemente für den umgebenden Abschnitt. Üblicherweise enthält es die Überschrift des umgebenden Abschnitts (ein Element von h1 bis h6) und gegebenenfalls eine Unterüberschrift; dies ist jedoch nicht erforderlich.
Historische Verwendung
Das <header>-Element existierte bereits zu Beginn von HTML für Überschriften. Es ist auf der allerersten Website zu sehen. Später wurden für Überschriften die Elemente <h1> bis <h6> eingeführt, sodass <header> eine andere Funktion übernehmen konnte.
Barrierefreiheit
Das <header>-Element definiert eine Landmark der Rolle banner, wenn es sich im Kontext des <body>-Elements befindet.
Befindet sich das <header>-Element innerhalb eines <article>, <main>, <section>, <nav>, <aside> oder eines Elements mit derselben ARIA-Rolle wie der impliziten ARIA-Rolle dieser Elemente, hat es stattdessen die Rolle generic und gilt nicht mehr als Landmark. 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 | Fließender Inhalt, wahrnehmbarer Inhalt. |
|---|---|
| Zulässiger Inhalt |
Fließender Inhalt, jedoch ohne <header> oder
<footer> als Nachfahren.
|
| Weglassen von Tags | Keines; sowohl das Start- als auch das End-Tag sind erforderlich. |
| Zulässige Elternelemente |
Jedes Element, das
fließenden Inhalt akzeptiert. Beachten Sie, dass ein <header>-Element
kein Nachfahre eines <address>-, eines
<footer>- oder eines anderen
<header>-Elements sein darf.
|
| Implizite ARIA-Rolle |
banner oder
generic, wenn das Element ein Nachfahre eines
article-, aside-, main-, nav- oder
section-Elements ist oder eines Elements mit der Rolle
article,
complementary,
main,
navigation
oder
region
|
| Zulässige ARIA-Rollen |
group, presentation oder
none
|
| DOM-Schnittstelle | [`HTMLElement`](/de/docs/Web/API/HTMLElement) |
Spezifikationen
| Spezifikation |
|---|
| HTML # the-header-element |