| [ Web Proxy ] |
| Viewing: https://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/header | [Back] [Original] |
Get to know MDN better
Dieser Inhalt wurde automatisch aus dem Englischen bersetzt, und kann Fehler enthalten. Erfahre mehr ber dieses Experiment.
<header> HTML-Header-ElementDiese Funktion ist gut etabliert und funktioniert auf vielen Gerten und in vielen Browserversionen. Sie ist seit Juli 2015 browserbergreifend verfgbar.
Das <header> HTML-Element reprsentiert 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.
<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;
}
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 mglicherweise die globale Navigation oder einen Slogan enthlt. 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 fr den umgebenden Abschnitt dar. Es enthlt normalerweise die berschrift des umgebenden Abschnitts (ein h1 h6 Element) und eine optionale Unterberschrift, aber dies ist nicht erforderlich.
Das <header>-Element existierte ursprnglich ganz am Anfang von HTML fr 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.
Dieses Element enthlt nur die globalen Attribute.
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.
<header>
<h1>Main Page Title</h1>
<img src="mdn-logo-sm.png" alt="MDN logo" />
</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>
| Inhaltskategorien | Flussinhalt, fhlbarer Inhalt. |
|---|---|
| Zulssiger Inhalt |
Flussinhalt, jedoch ohne <header>- oder
<footer>-Nachkommen.
|
| Tag-Auslassung | Keine, sowohl das ffnende als auch das schlieende Tag sind verpflichtend. |
| Zulssige 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
|
| Zulssige ARIA-Rollen |
group, presentation oder
none
|
| DOM-Schnittstelle | [`HTMLElement`](/de/docs/Web/API/HTMLElement) |
| Spezifikation |
|---|
| HTML # the-header-element |
<body>, <nav>, <article>, <aside>, h1, h2, h3, h4, h5, h6, <footer>, <section>, <address>.<a><abbr><acronym><address><area><article><aside><audio><b><base><bdi><bdo><big><blockquote><body><br><button><canvas><caption><center><cite><code><col><colgroup><data><datalist><dd><del><details><dfn><dialog><dir><div><dl><dt><em><embed><fencedframe><fieldset><figcaption><figure><font><footer><form><frame><frameset><geolocation><h1><h6><head><header><hgroup><hr><html><i><iframe><img><input><ins><kbd><label><legend><li><link><main><map><mark><marquee><menu><meta><meter><nav><nobr><noembed><noframes><noscript><object><ol><optgroup><option><output><p><param><picture><plaintext><pre><progress><q><rb><rp><rt><rtc><ruby><s><samp><script><search><section><select><selectedcontent><slot><small><source><span><strike><strong><style><sub><summary><sup><table><tbody><td><template><textarea><tfoot><th><thead><time><title><tr><track><tt><u><ul><var><video><wbr><xmp><input>-Typen<input type="button"><input type="checkbox"><input type="color"><input type="date"><input type="datetime-local"><input type="email"><input type="file"><input type="hidden"><input type="image">`<input type="month">`<input type="number"><input type="password"><input type="radio"><input type="range"><input type="reset"><input type="search"><input type="submit"><input type="tel"><input type="text"><input type="time"><input type="url"><input type="week"><script type>Der Bauplan fr ein besseres Internet.
Teile dieses Inhalts sind 19982026 von einzelnen mozilla.org-Mitwirkenden. Inhalte sind verfgbar unter einer Creative-Commons-Lizenz.
| Web Proxy Viewer | New URL | Original Page |