HTML <header> Tag
The <header> tag in HTML defines a container for introductory content or a set of navigational links. It typically appears at the top of a section or the entire page. Inside a <header>, you can find elements like headings ( <h1> to <h6> ), logos, search forms, or navigation menus. It is a semantic element, meaning it helps to describe the structure and content of the document to both browsers and developers.
Syntax
<header>
<!-- Introductory content here -->
</header>
Attributes
The <header> tag supports the Global Attributes in HTML. Common ones include:
| Attribute | Value | Description |
|---|---|---|
class |
classnames | Specifies one or more class names for the element (refer to CSS class selector). |
id |
id | Specifies a unique ID for the element (refer to CSS id selector). |
style |
CSS properties | Specifies inline CSS styles for the element. |
title |
text | Provides a text advisory about the element, often displayed as a tooltip. |
accesskey |
character | Specifies a keyboard shortcut to activate/focus on the element. |
hidden |
hidden |
Specifies that the element should be hidden. |
lang |
language code | Specifies the language of the element's content. |
dir |
ltr or rtl |
Specifies the text direction of the element's content. |
Example
<header>
<h1>Welcome to My Website</h1>
<nav>
<a href="/">Home</a>
<a href="/about">About</a>
<a href="/contact">Contact</a>
</nav>
</header>
More Examples
Basic Header with a Logo and Heading:
<header>
<img src="logo.png" alt="Website Logo" width="100">
<h1>My Awesome Blog</h1>
</header>
Header with Search Form:
<header>
<h1>My Product Catalog</h1>
<form action="/search" method="get">
<input type="text" name="query" placeholder="Search products...">
<button type="submit">Search</button>
</form>
</header>
Header within a Section:
<article>
<header>
<h2>Article Title</h2>
<p>Published on: <time datetime="2024-02-29">February 29, 2024</time></p>
</header>
<p>This is the content of the article...</p>
</article>
Complex Header with Multiple Elements:
<header class="main-header">
<div class="logo-container">
<img src="logo.svg" alt="Company Logo" class="logo">
<span class="company-name">CodeLucky</span>
</div>
<nav class="main-nav">
<ul class="nav-list">
<li class="nav-item"><a href="/" class="nav-link">Home</a></li>
<li class="nav-item"><a href="/services" class="nav-link">Services</a></li>
<li class="nav-item"><a href="/blog" class="nav-link">Blog</a></li>
<li class="nav-item"><a href="/contact" class="nav-link">Contact</a></li>
</ul>
</nav>
<div class="header-actions">
<button class="login-button">Login</button>
<button class="signup-button">Sign Up</button>
</div>
</header>
In this example, the header includes a logo, company name, navigation links, and action buttons, styled using CSS classes. This example shows how flexible the <header> tag is for complex layouts.
Browser Support
The <header> tag is supported by all modern browsers:
- Chrome
- Edge
- Firefox
- Safari
- Opera
Notes and Tips
- A document can have multiple
<header>elements. They can be used within sections and articles, not just at the top of the page. - The
<header>tag is a semantic element and improves the structure and accessibility of your HTML. - It is a good practice to include the main site logo and navigation within the main
<header>tag of your webpage. - Avoid putting content in a
<header>that is not related to introductory content or navigation. Use<section>,<article>,<div>, or other suitable tags for non-header content. - Use CSS to style the
<header>tag effectively, enhancing its appearance and layout. - When using a
<header>inside another element, that header is related to that enclosing element's context (for example a<article>or<aside>). - Keep headers simple and user-friendly, focusing on clear messaging and easy navigation.
