HTML <header> Tag
Der <header>-Tag definiert den Kopfbereich einer Seite oder eines Abschnitts. Beschreibung, Attribute und Verwendungsbeispiele.
Der <header>-Tag definiert einleitenden Inhalt für eine Seite oder einen Abschnitt. Er enthält üblicherweise ein Logo, einen Seitentitel, ein Suchfeld sowie Navigationslinks wie ein <nav>-Menü.
Dieser Tag fügt dem Dokumentenumriss keinen neuen Abschnitt hinzu. Ein <header>-Element enthält häufig eine Überschrift (ein <h1>–<h6>-Element) für den umgebenden Abschnitt, eine Überschrift ist jedoch nicht erforderlich.
Der <header>-Tag ist eines der semantischen HTML5-Elemente. In einem einzigen Dokument können mehrere <header>-Tags verwendet werden. Sie werden häufig innerhalb von <body>-, <article>- oder <section>-Elementen platziert. Das entsprechende Element zum Abschluss des Inhalts ist der <footer>-Tag.
Wozu mehrere Header verwenden
Eine Seite kann mehr als einen <header> haben, da Header auf verschiedenen Ebenen existieren:
- Seitenweiter Header — ein direktes Kindelement von
<body>. Er leitet das gesamte Dokument ein: das Seitenlogo, die globale Navigation, ein Suchfeld. In der Regel gibt es davon nur einen. - Abschnittsweiser Header — ein Header, der innerhalb eines
<article>- oder<section>-Elements platziert ist. Er leitet nur diesen Inhaltsblock ein, zum Beispiel Titel, Autor und Veröffentlichungsdatum eines einzelnen Blogbeitrags.
Betrachten wir eine Blog-Indexseite. Der seitenweite <header> enthält den Seitenname und das Hauptmenü. Jeder Beitrag ist dann ein <article> mit seinem eigenen <header>, der Titel und Metadaten des Beitrags trägt. Beide sind Header, beschreiben jedoch unterschiedliche Geltungsbereiche – das hilft Browsern, Screenreadern und Suchmaschinen, die Struktur zu verstehen.
Barrierefreiheit und das Banner-Landmark
Wenn <header> ein direktes Kindelement von <body> ist, stellen assistive Technologien ihn als das banner-ARIA-Landmark bereit – die seitenweite Einleitungsregion. Screenreader-Nutzer können direkt dorthin springen, daher muss role="banner" nicht manuell hinzugefügt werden.
Diese Zuordnung entfällt, wenn der <header> innerhalb eines <article>-, <section>-, <main>-, <aside>- oder <nav>-Elements verschachtelt ist. Ein solcher Header leitet nur seinen eigenen Abschnitt ein und wird nicht als Banner-Landmark behandelt. Ein Dokument sollte nur ein einziges Banner-Landmark haben; daher sollte ein einzelner seitenweiter <header> als Kindelement von <body> beibehalten werden.
Syntax
Der <header>-Tag wird paarweise verwendet. Der Inhalt wird zwischen dem öffnenden (<header>) und dem schließenden (</header>) Tag geschrieben.
Beispiel des HTML-<header>-Tags
Diese Seite hat zwei Header: einen seitenweiten Header innerhalb von <body> und einen abschnittsweisen Header innerhalb eines <article>.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
ul {
padding: 0;
}
ul li {
display: inline-block;
margin-right: 10px;
color: #778899;
}
</style>
</head>
<body>
<header>
<nav>
<ul>
<li>Home</li>
<li>About us</li>
</ul>
</nav>
<h1>Welcome to our page</h1>
<hr>
</header>
<article>
<header>
<h2>The section title</h2>
<p>The text paragraph.</p>
</header>
</article>
</body>
</html>Beispiel des HTML-<header>-Tags mit CSS-Eigenschaften
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
font-family: Arial, sans-serif;
line-height: 2;
}
h2 {
text-align: center;
}
ul {
padding: 0;
}
ul li {
list-style-type: none;
display: inline-block;
margin-right: 10px;
}
a {
display: block;
color: #778899;
}
</style>
</head>
<body>
<header>
<nav>
<ul>
<li>
<a href="https://www.w3docs.com/learn-html.html">Learn HTML</a>
</li>
<li>
<a href="https://www.w3docs.com/learn-git.html">Learn Git</a>
</li>
</ul>
</nav>
<h1>Welcome to our page</h1>
<hr>
</header>
<main>
<h2>Get answers to your coding questions</h2>
<p>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
<p>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book. Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
</main>
</body>
</html>Attribute
Der <header>-Tag unterstützt die globalen Attribute und Ereignisattribute. Er hat keine eigenen Attribute.
id und class für das Styling hinzufügen
<header id="main-header" class="site-header">
<h1>Page Title</h1>
</header>Verwandte Tags
<footer>— das abschließende Gegenstück zu<header>.<main>— der dominante Inhalt des Dokuments.<nav>— Navigationslinks, oft innerhalb eines Headers platziert.<section>— ein eigenständiger Abschnitt, der seinen eigenen Header haben kann.<article>— in sich abgeschlossener Inhalt, der seinen eigenen Header haben kann.