The
<header>tag represents a container for introductory content or navigational links.
It usually contains headings, logos, and main navigation links, but it can appear multiple times on a page (e.g., for sections or articles).
Syntax
<header>
<!-- Introductory content like logo, navigation, heading -->
</header>Attributes
| Attribute | Description |
|---|---|
| id | Assigns a unique identifier. |
| class | Specifies one or more class names. |
| style | Inline CSS styles. |
| title | Provides additional information about the element. |
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Header Tag Example</title>
</head>
<body>
<header style="background-color: #f0f0f0; padding: 20px;">
<h1>My Website</h1>
<nav>
<a href="#">Home</a> |
<a href="#">About</a> |
<a href="#">Contact</a>
</nav>
</header>
<main>
<h2>Welcome to my website!</h2>
<p>This is an example showing the header element.</p>
</main>
</body>
</html>Output
Browser Output
You will see a distinct top section with a heading “My Website” and navigation links.
It is styled with a background color and padding.
Use our TryIt Editor to experiment with header content and layout.
Browser Support
 Chrome |  Firefox |  Edge |  Safari |  Opera |  IE9+ |
|---|---|---|---|---|---|
| ✅Yes | ✅Yes | ✅Yes | ✅Yes | ✅Yes | ✅Yes |
All major browser supports <header> tag.
Notes
<header>is semantic, meaning it describes the role of the content for browsers and assistive technologies.- Can be used multiple times (for main header and section headers).
- Enhances SEO and accessibility.
Conclusion
The <header> tag is ideal for introducing content or navigation areas.
It gives structure and semantic meaning to the top part of a webpage or section.
