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.
<!DOCTYPE html>
<html>
<body style="font-size: 25px;">
<h1 style="color: green;">GeeksforGeeks</h1>
<h3>HTML Header Tag</h3>
<hr>
<article>
<header>
<h3 style="color: green;"> GeeksforGeeks Learning </h3>
<p>Posted by GFG</p>
<p>
A Computer Science portal for geeks.
It contains well written, well thought <br>
and well explained computer science and
programming articles.
</p>
</header>
</article>
</body>
</html>
Output:
- Displays a webpage with a main title and subtitle.
- Includes an article with a header containing a subheading, author, and description.
- Uses inline CSS to style font size and heading colors.
Note: The <header> can be used for each article or section to show key context like the title, author, and a brief description, not just the main page header.
HTML <header> Tag Attributes
The <header> tag has no unique attributes but:
- Supports global HTML attributes like id, class, style, role, lang, data-*, and tabindex.
- Can be styled with CSS to control its appearance and behavior.
- Supports event attributes such as onclick and onmouseover to add interactivity and enhance user experience.
<!DOCTYPE html>
<html>
<body>
<h1>GeeksforGeeks</h1>
<h3>HTML Header Tag</h3>
<header>
<h1>This is the heading.</h1>
<h4>This is the sub-heading.</h4>
<p>This is the metadata.</p>
</header>
</body>
</html>
Output:
- Displays a webpage with a main title and subtitle.
- Uses a <header> to include a heading, subheading, and metadata for the section.
<!DOCTYPE html>
<html>
<body>
<h1>GeeksforGeeks</h1>
<h3>HTML Header Tag</h3>
<header>
<a href=
"https://www.geeksforgeeks.org/dsa/dsa-tutorial-learn-data-structures-and-algorithms/">
Algo</a> |
<a href=
"https://www.geeksforgeeks.org/dsa/dsa-tutorial-learn-data-structures-and-algorithms/">
DS</a> |
<a href=
"https://www.geeksforgeeks.org/category/program-output/">
Languages</a> |
<a href=
"https://www.geeksforgeeks.org/interview-experiences/company-interview-corner/">
Interview</a> |
<a href=
"https://www.geeksforgeeks.org/student-corner/">
Students</a> |
<a href=
"https://www.geeksforgeeks.org/gate/gate-cs-notes-gq/">
Gate</a> |
<a href=
"https://www.geeksforgeeks.org/software-engineering/articles-on-computer-science-subjects-gq/">
CS Subjects</a> |
<a href=
"https://www.geeksforgeeks.org/interview-experiences/quiz-corner-gq/">
Quizzes</a>
<div class="search-bar">
<input type="text" placeholder="Search products...">
<button>Search</button>
</div>
</header>
</body>
</html>
Output:
- Creates a webpage with a main title, subtitle, and a <header> containing multiple navigation links.
- Includes a simple search bar within the header for user input.