Live Preview
A simple site header with title and navigation links:
HTML <header> Tag
Overview
What You’ll Learn
By the end of this tutorial, you’ll build semantic page headers with logos, navigation, and section introductions.
The HTML <header> tag is a semantic HTML5 element for introductory content at the top of a page or section. This guide covers syntax, comparisons, accessibility, and best practices for beginners.
Core Syntax
Wrap header content in <header> tags.
Site Navigation
Pair header with nav for primary links.
Section Headers
Use header inside section or article.
header vs head
Visible landmark vs invisible metadata.
CSS Styling
Style site headers with borders and layout.
banner Landmark
Understand implicit role for assistive tech.
Fundamentals
What Is the <header> Tag?
The header element (<header>) is a semantic HTML5 tag that defines introductory content for its nearest sectioning ancestor or the page. It typically contains a logo, site navigation, search form, or section heading—content that identifies and introduces what follows.
Not the same as <head> or <h1>
head is invisible metadata before body. header is visible content inside body. Heading tags (h1–h6) label text hierarchy and often appear inside a header block.
When used as the page header, browsers expose a banner landmark for screen readers. Common child elements include <h1>, <nav>, and <p>.
Foundation
📝 Syntax
Enclose introductory content between opening and closing <header> tags, usually at the start of body or inside a section:
syntax.html
<header>
<!-- Your header content goes here -->
</header>Syntax Rules
- Place the page-level
headerat the top ofbody, beforemain. - Use one primary site
headerper page for a clearbannerlandmark. - Label navigation with
aria-labelonnav(e.g.aria-label="Main"). - Do not confuse
<header>with the invisible<head>metadata element.
Cheat Sheet
⚡ Quick Reference
| Pattern | Code Snippet | Notes |
|---|---|---|
| Site header | <header><h1>Logo</h1><nav>...</nav> | Page-level banner |
| Section header | <section><header><h2>...</h2> | Scoped to the section |
| Main navigation | <nav aria-label="Main"> | Inside page header |
| Landmark role | banner | Implicit for page header |
| Article header | <article><header>...</header> | Title, author, date |
| Tag-specific attrs | None | Global attributes only |
Comparison
⚖️ <header> vs <div>
Both can wrap top-of-page content visually, but only header carries semantic meaning:
| Feature | <header> | <div> |
|---|---|---|
| Semantic role | Header landmark (banner) | Generic container |
| SEO & a11y | Built-in header semantics | Requires ARIA role manually |
| Scope | Nearest section or page | No implied scope |
| Best for | Logo, site nav, section intro | Non-semantic layout wrappers |
Comparison
⚖️ <header> vs <head>
These names sound similar but serve completely different roles:
| Feature | <header> | <head> |
|---|---|---|
| Location | Inside body (visible) | Inside html, before body |
| Purpose | Introductory page/section content | Document metadata |
| Visible to users | Yes | No |
| Typical contents | Logo, nav, section title | title, meta, link, script |
Comparison
⚖️ <header> vs Heading Tags (h1–h6)
The old reference incorrectly conflated header with heading tags. They work together:
| Feature | <header> | <h1>–<h6> |
|---|---|---|
| Element type | Sectioning / landmark container | Heading text labels |
| Role | Groups intro content (nav, logo, title) | Defines content hierarchy |
| Typical usage | <header><h1>Site Name</h1><nav>...</nav></header> | One h1 per page for main topic |
| Related tutorial | This page | See heading tag tutorial |
Reference
🧰 Attributes
The <header> tag has no tag-specific attributes. Use global attributes and semantic child elements inside the header:
class / id GlobalCSS hooks for layout, sticky positioning, and branding styles.
class="site-header"aria-labelledby A11yLabels the header landmark when multiple headers exist on one page.
aria-labelledby="site-title"lang GlobalLanguage of header text when it differs from the document.
lang="en"Child elements ContentUse h1–h6, nav, p, and links inside header.
<nav aria-label="Main"> attributes.html
<header class="site-header">
<h1 id="logo">My Website</h1>
<nav class="main-nav" aria-label="Main">
<!-- Navigation menu items go here -->
</nav>
</header>Hands-On
Examples Gallery
Site headers, document structure, and section headers with copy-ready code and live previews.
Logo and Navigation
The primary use of <header> is to group a site logo (often an h1) with primary navigation.
logo-and-navigation.html
<header>
<h1 id="logo">My Website</h1>
<nav class="main-nav" aria-label="Main">
<a href="#home">Home</a>
<a href="#about">About</a>
</nav>
</header>📚 Common Use Cases
Use <header> for site-wide branding and primary navigation, hero introductions, article titles with bylines, section headings inside long pages, and search bars at the top of a layout. Pair with main and footer for complete page structure.
Document Header
Define the header of an entire document with logo and navigation before the main content area.
document-header.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Website</title>
</head>
<body>
<header>
<h1>My Website</h1>
<nav aria-label="Main">
<a href="#">Home</a>
<a href="#">About</a>
</nav>
</header>
<main>
<!-- Main content goes here -->
</main>
</body>
</html>Sectional Headers
Use <header> within section or article to define subsection introductory content.
sectional-headers.html
<section>
<header>
<h2>Section 1</h2>
</header>
<p>Section content goes here.</p>
</section>Design
Styling <header> with CSS
Visually distinguish the site header from main content with spacing, borders, and flex layout:
border-bottom Separate from mainpadding Comfortable spacingheader nav Horizontal link rowbackground Dark header bar header-styles.css
/* Site header styling */
header.site-header {
padding: 1rem 1.25rem;
border-bottom: 1px solid #e2e8f0;
background: #f8fafc;
}
header.site-header h1 {
margin: 0 0 0.5rem;
font-size: 1.25rem;
}
header nav {
display: flex;
gap: 1rem;
}Live styled header
CodeToFun
A11y
♿ Accessibility
Semantic headers help all users navigate your page:
- Use one page header — a single
bannerlandmark per page is clearest for screen readers. - Label navigation — add
aria-label="Main"when header and footer both containnav. - Use heading hierarchy — put an
h1in the page header for the site or page topic. - Place before main — put
headerbeforemainin the DOM for logical reading order.
🧠 How <header> Works
1
Author marks the header region
Wrap logo, nav, and intro text in header.
Markup
2
Browser exposes a landmark
Page-level headers map to the banner landmark for assistive tech.
Accessibility
3
CSS styles the header block
Flex layouts, sticky positioning, and backgrounds visually brand the top of the page.
Design
=
Clear, navigable pages
Users and search engines understand where introductory content lives.
Compatibility
Universal Browser Support
The <header> element is fully supported in all modern browsers and Internet Explorer 9+.
Baseline · HTML5 Semantic
Header landmarks that work everywhere
From legacy Internet Explorer to the latest mobile browsers — header is a safe HTML5 building block for page structure.
100% Core tag support
Google Chrome All versions · Desktop & Mobile
Full supportMozilla Firefox All versions · Desktop & Mobile
Full supportApple Safari All versions · macOS & iOS
Full supportMicrosoft Edge All versions · Chromium & Legacy
Full supportInternet Explorer IE 9+ · Legacy environments
Full supportOpera All modern versions
Full support<header> tag 100% supported
Bottom line: Ship semantic page headers with confidence. The <header> element is safe to use in every production environment today.
Wrap Up
Conclusion
Mastering the HTML <header> tag is key to creating well-structured and accessible web content. Whether branding your site or introducing a section, header provides semantic meaning that plain div elements cannot.
Use one clear page header before main, label navigation for accessibility, and style the block with CSS so users immediately recognize your site identity.
Pro Tips
💡 Best Practices
✅ Do
- Use
headerfor logo, site nav, and section introductions - Place page header before
mainin the DOM - Add
aria-labelon headernavelements - Include an
h1in the page header when appropriate - Pair with
mainandfooterfor full page structure
❌ Don’t
- Confuse
headerwith invisibleheadmetadata - Confuse
headerwith heading tags (h1–h6) - Put long article body text inside
header - Use multiple unlabeled page-level headers without reason
- Replace semantic
headerwith a plaindiv
Summary
Key Takeaways
Knowledge Unlocked
Six truths every developer should know about <header>
Bookmark these before you ship — they’ll keep your page structure semantic and accessible.
6
Core concepts 01
Visible Landmark
<header> is intro content in body.
02
Site Nav
Pair with labeled nav.
03
Not head
Metadata lives in head.
04
Not h1–h6
Headings go inside header.
Structure 05
banner Role
Implicit landmark for page header.
Accessibility 06
Universal Support
HTML5 semantic element, IE9+.
Compatibility❓ Frequently Asked Questions
It defines introductory content for a page or section — typically a logo, site navigation, and section titles.
head holds invisible metadata before body. header is visible introductory content inside body.No.
header is a container landmark. h1 is a heading tag that often appears inside a header to label the site or section title.Yes. A header inside
section or article introduces that block only — such as a section title or article byline.No tag-specific attributes exist. Use global attributes like
class, id, and aria-labelledby.Yes.
header is an HTML5 semantic element with full support in all modern browsers and IE 9+.Build Your First Site Header
Practice logo, navigation, and section headers in the interactive HTML editor.
About the author
6 people found this page helpful