The <header> tag is a semantic HTML element that defines the introductory or navigational part of a webpage or section, usually containing titles, links, or key information.
- A page can have multiple <header> tags, but only one main site header.
- It can include titles, logos, navigation menus, search bars, or introductory text.
- The <header> provides context, not all content.
- It helps users understand and navigate different sections of the page.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
header {
background: #4CAF50;
color: white;
padding: 0.5px;
text-align: center;
}
nav a {
color: white;
margin: 0 10px;
text-decoration: none;
}
</style>
</head>
<body>
<header>
<h1>My Website</h1>
<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</nav>
</header>
</body>
</html>
- Defines a webpage header with a title and navigation links.
- Styles the header with a green background, white text, centered content, and spaced links.
Note: Header tag cannot be placed within a <footer>, <address>, or another <header> element.
Syntax:
<header> . . . . </header>Example
The <header> tag is used inside the <article> element to define introductory content for that article.
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<body style="font-size: 25px;">
<h1 style="color: green;">GeeksforGeeks</h1>
<h3>HTML Header Tag</h3>
<hr>
<!--Driver Code Ends-->
<article>