<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>
-Element HTML repräsentiert einführende Inhalte, typischerweise eine Gruppe von einleitenden oder navigativen Hilfsmitteln. Es kann einige Überschriftselemente, aber auch ein Logo, ein Suchformular, einen Autorennamen und andere Elemente enthalten.
Probieren Sie es aus
Verwendungshinweise
Das <header>
-Element hat dieselbe Bedeutung wie die seitenweite banner
Landmarkenrolle, es sei denn, es ist innerhalb eines sectioning-Inhalts verschachtelt. Dann ist das <header>
-Element keine Landmarke.
Das <header>
-Element kann ein globales Website-Header definieren, das als banner
im Accessibility-Baum beschrieben wird. Es umfasst in der Regel ein Logo, den Firmennamen, eine Suchfunktion und möglicherweise die globale Navigation oder einen Slogan. Es befindet sich normalerweise oben auf der Seite.
Andernfalls ist es ein section
im Accessibility-Baum und enthält in der Regel die Überschrift der umgebenden Sektion (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 <header>
frei wurde, eine andere Rolle zu übernehmen.
Attribute
Dieses Element enthält nur die globalen Attribute.
Barrierefreiheit
Beispiele
Seiten-Header
<header>
<h1>Main Page Title</h1>
<img src="mdn-logo-sm.png" alt="MDN logo" />
</header>
Ergebnis
Artikel-Header
<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ßende Inhalte, fühlbare Inhalte. |
---|---|
Zulässiger Inhalt | Fließende Inhalte, aber ohne <header> - oder <footer> -Nachkommen. |
Tag-Auslassung | Keine, sowohl der startende als auch der endende Tag sind obligatorisch. |
Erlaubte Eltern | Jedes Element, das fließende Inhalte 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 role=article , complementary , main , navigation oder region |
Erlaubte ARIA-Rollen | group ,presentation oder none |
DOM-Schnittstelle | [`HTMLElement`](/de/docs/Web/API/HTMLElement) |
Spezifikationen
Specification |
---|
HTML Standard # the-header-element |
Browser-Kompatibilität
BCD tables only load in the browser