The header element represents a container for introductory content or navigational links. It is typically used to group site-wide headers or section-specific headings, logos, and navigation menus.
✅ Basic Syntax
<header>
<h1>My Website</h1>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
🎯 Typical Use Cases
- Main page header including logo and site title
- Navigation menus
- Section headers within a page or article
📚 Semantic Meaning
- Helps structure the page into meaningful parts.
- Improves accessibility by indicating the start of important content.
- Search engines use it to better understand page layout.
⚠️ Notes
- Multiple
<header>tags can be used on a page — for the page itself and for different sections or articles. - Should not be confused with
<head>, which is for metadata.
✅ Summary
| Feature | <header> Tag |
|---|---|
| Purpose | Container for introductory content and navigation |
| Typical content | Headings, logos, nav menus |
| Semantic role | Landmark region for page or section header |
| Usage | Multiple per page allowed |