SEO glossary
What is a Header?
Learn what a header is in web design and HTML—the top page chrome with logo and navigation—and how it differs from heading tags (H1–H6) used for content structure.
Definition
A header is the introductory top region of a web page—often implemented with the HTML header element—that typically contains branding, navigation, and utility controls, distinct from heading tags that label sectional content in the document outline.
Header: page chrome, not a heading level
In everyday design language, the header is the top band visitors see on every page: logo, primary navigation, search, account menu, locale switcher, announcement bar. In HTML, that region is often wrapped in <header>—a landmark that helps assistive technology jump to introductory content.
Heading tags (h1–h6) are different. They label sections in the document outline. Confusing "header" with "H1" causes recurring SEO bugs: logos marked H1 on every URL, navigation items promoted to H2, or article titles buried in <div> while the site header consumes the only semantic heading.
Header vs heading tags
| Term | Meaning | HTML |
|---|---|---|
| Header (design) | Top chrome repeated sitewide | Often <header> |
| Heading tag | Section title in outline | <h1>–<h6> |
| Page title / meta title | SERP string | <title> in <head> |
<body>
<header role="banner">
<a href="/" aria-label="Crawlox home">Crawlox</a>
<nav aria-label="Primary">
<a href="/product">Product</a>
<a href="/pricing">Pricing</a>
</nav>
</header>
<main>
<h1>Website crawl monitoring for SEO teams</h1>
<p>Body copy begins here...</p>
</main>
</body>
The visible site header contains navigation. The H1 tag introduces the unique topic of this URL inside <main>.
The HTML header element
<header> represents introductory content for its nearest sectioning root or section. Common patterns:
| Pattern | Markup |
|---|---|
| Site-wide banner | <body><header>...</header><main> |
| Article masthead | <article><header><h1>...</h1><p>Byline</p></header> |
| Section intro | <section><header><h2>...</h2></header> |
Not every top-of-page visual must be <header>, but using landmarks consistently helps accessibility audits and DOM clarity for parsers.
Header contents and SEO
Navigation links
Primary nav in the header exposes crawl paths and sitewide priority signals—classic on-site SEO. Links should:
- Point to important hubs with descriptive anchor text
- Avoid keyword-stuffed footer-style link blocks in the header
- Reflect the same priorities as XML sitemaps where possible
Logo and home link
The logo typically links to /. On the homepage, some teams place the brand name in the H1 inside header or main—acceptable if it matches navigational intent. On inner pages, prefer content H1 in main while logo remains styled text or <p> inside header.
Utility controls
Search boxes, cart icons, and login buttons belong in header chrome. They should not introduce extra H1 elements. Search result pages get their own H1 (Search results for "crawl").
Announcement bars
Promo strips above the header ("Free trial—ends Friday") are usually not headings. If every URL inherits a holiday H2 in the announcement component, outline noise spreads sitewide.
Header vs main: landmark boundaries
┌─────────────────────────────────────┐
│ HEADER (chrome, repeated) │
│ logo · nav · utilities │
├─────────────────────────────────────┤
│ MAIN (unique page content) │
│ H1 · body copy · in-content links │
├─────────────────────────────────────┤
│ FOOTER (secondary nav, legal) │
└─────────────────────────────────────┘
Search engines associate unique relevance signals with main content. Header/footer repetition is expected; stuffing keywords there rarely helps rankings and can look manipulative.
Sticky and fixed headers
Sticky headers improve navigation on long pages but create UX and SEO-adjacent issues:
- Covering focused H1 content on mobile
- Reducing visible viewport for Core Web Vitals CLS if height shifts
- Trapping keyboard focus if z-index overlays modals incorrectly
Test sticky headers against real content templates, not only the homepage.
Multiple headers on one page
Valid HTML5:
<header><!-- site banner --></header>
<main>
<article>
<header>
<h1>Article title</h1>
<p>Published Aug 14, 2026</p>
</header>
...
</article>
</main>
Here the article <header> groups the H1 and byline—distinct from site chrome header. Both can coexist without duplicate site-wide H1 issues if scoped correctly.
Common header SEO mistakes
- H1 logo on every page — dilutes unique topic signals on inner URLs
- Navigation labels as H2 — "Products," "Solutions" as headings on all pages
- Mega-menu duplicate links — hundreds of identical footer/header combos
- Hidden header text — off-screen keyword blocks in header CSS
- Header-only H1 for SPAs — route content never updates H1 in main
- Rendering header before consent banner — shifts layout; fix CLS
Header and mobile layouts
Mobile hamburger menus still contain the same links—crawlability depends on links being in HTML, not only revealed on tap. If nav links exist only after JS click handlers without <a href> in DOM, discovery suffers.
Responsive patterns:
| Pattern | SEO note |
|---|---|
| Collapsed nav | Links present in HTML, hidden via CSS |
| Separate mobile subdomain | Legacy—consolidate to responsive single URL |
| App-style bottom tab bar | Ensure <nav> and real hrefs |
Header accessibility
- One
bannerlandmark per page (site header) navwitharia-labeldistinguishing primary vs utility menus- Skip link (
Skip to main content) bypassing repetitive header on keyboard nav - Logo link text meaningful (
aria-labelif image-only)
Accessible headers improve usability; fewer outline bugs help SEO audits indirectly.
Header in templating systems
CMS themes define global header partials. On theme releases, confirm inner pages place H1 only in the main content partial, header partials do not emit stray heading tags, and announcement bars stay out of heading components. One header partial fix can correct millions of page impressions.
Header vs HTTP headers (disambiguation)
"Header" in SEO conversations sometimes means HTTP response headers (Cache-Control, X-Robots-Tag)—server metadata, not page chrome. Context matters:
| Meaning | Layer |
|---|---|
| Page header | HTML body chrome |
| HTTP header | Server response |
| Heading tag | h1–h6 content outline |
This glossary page covers page header chrome only.
How Crawlox helps with headers
Crawlox maps internal links discovered in global navigation regions alongside per-page H1 and heading outlines. Spot templates where header components inject duplicate H1s or heading levels across every URL, and verify that main content headings remain unique after theme changes. Pair crawl structure with navigation audits to align header priorities with on-site SEO goals.
Related terms
Frequently asked questions
Is the header the same as the H1?
No. The header is a layout region (logo, nav, search). The H1 is a heading tag marking the page's primary topic, usually inside main content. They may coexist but serve different roles.
Should the logo be in the header element?
Yes, typically. The logo link belongs in <header> site chrome. On inner pages, the article H1 should be the content headline in <main>, not the logo text repeated as H1.
Does the HTML header element help SEO?
Not as a ranking factor by itself. Clean header markup helps accessibility and crawl clarity—especially navigation links—but SEO value comes from linked destinations and page content, not the landmark wrapper alone.
Can a page have multiple header elements?
HTML5 allows header inside sections (e.g., article header with title and byline). Use landmarks logically; avoid multiple competing site-wide headers.
What is a sticky header?
A CSS pattern fixing the header to the viewport on scroll. UX choice only—ensure it does not hide H1 content or trap focus for keyboard users.
References
Explore authoritative guidance and frameworks related to header.
Explore every glossary definition
Return to the glossary to search by term, alias, starting letter, or category.