← 返回首页
<header> HTML-Header-Element - HTML | MDN

Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.

View in English Always switch to English

<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.

In diesem Artikel

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

html
<header> <h1>Main Page Title</h1> <img src="mdn-logo-sm.png" 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="https://example.com/the-planet-earth/">Continue reading…</a></p> </article>

Ergebnis

Technische Zusammenfassung

Inhaltskategorien Zulässiger Inhalt Tag-Auslassung Zulässige Eltern Implizite ARIA-Rolle Zulässige ARIA-Rollen DOM-Schnittstelle
Flussinhalt, fühlbarer Inhalt.
Flussinhalt, jedoch ohne <header>- oder <footer>-Nachkommen.
Keine, sowohl das öffnende als auch das schließende Tag sind verpflichtend.
Jedes Element, das Flussinhalt akzeptiert. Beachten Sie, dass ein <header>-Element kein Nachkomme eines <address>, <footer> oder eines anderen <header>-Elements sein darf.
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
group, presentation oder none
[`HTMLElement`](/de/docs/Web/API/HTMLElement)

Spezifikationen

Spezifikation
HTML
# the-header-element

Browser-Kompatibilität

JavaScript aktivieren, um diese Browser-Kompatibilitätstabelle anzuzeigen.

Siehe auch