HTML <header>-Tag
Das <header>-Tag definiert den Header einer Seite oder eines Abschnitts. Es enthält normalerweise ein Logo, eine Suche, Navigationslinks usw.
Dieses Tag führt keinen neuen Abschnitt in der Gliederung ein. Ein <header>-Element enthält üblicherweise eine Überschrift (ein <h1>–<h6>-Element) für den umgebenden Abschnitt. Dies ist jedoch nicht zwingend erforderlich.
Das <header>-Tag ist eines der HTML5-Elemente. In einem HTML-Dokument können Sie mehrere <header>-Tags verwenden. Sie werden üblicherweise innerhalb von <body>-, <article>- oder <section>-Elementen platziert.
DANGER
Es ist nicht erlaubt, das <header>-Tag innerhalb der <footer>- und <address>-Elemente sowie in einem anderen <header>-Tag zu platzieren.
Syntax
Das <header>-Tag kommt in Paaren vor. Der Inhalt wird zwischen dem öffnenden (<header>) und dem schließenden (</header>) Tag geschrieben.
Beispiel für das HTML <header>-Tag:
Beispiel für das HTML <header>-Tag
<!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>Ergebnis
Beispiel für das HTML <header>-Tag mit CSS-Eigenschaften:
Beispiel für das HTML <header>-Tag 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
Das <header>-Tag unterstützt Globale Attribute und Ereignisattribute.
So stylen Sie ein HTML <header>-Tag
<header id="main-header" class="site-header">
<h1>Page Title</h1>
</header>Praxis
Was ist laut dem Inhalt der angegebenen URL über das HTML `<header>`-Tag wahr?