A strong website header gives visitors a reliable way to identify the site, move to important pages, search when useful, and reach a primary action. Build it with a semantic <header>, one or more clearly named <nav> regions, native links and buttons, responsive CSS, and a skip link to the main content. The examples below show practical patterns you can adapt without turning the top of every page into an overcrowded control panel.
What a website header should contain
HTML’s <header> element represents introductory content. When it is not nested inside sectioning content, <main>, or an element with the same implicit role, it has the site-wide banner landmark meaning. It is a container, not a heading level. A global header commonly groups the logo or site name, search, navigation, and sometimes a slogan or utility action. See the MDN header reference for the element’s defined behavior.
Keep the information hierarchy visible in the markup. Link the logo or site name to the home page, place each navigation group in a <nav>, and use a real <button> for an action such as opening a menu. Do not make a generic <div> behave like a link or button.
Four header directions to adapt
| Pattern | Typical contents | Best fit | Design caution |
|---|---|---|---|
| Minimal brand bar | Wordmark, a few primary links, one clear action | Small organizations, portfolios, landing-page sites | Do not hide essential destinations behind a decorative menu. |
| Editorial | Publication identity, section links, search | News, magazines, documentation and archive-heavy sites | Keep topic links grouped so the header does not become a long list. |
| Commerce | Store identity, category navigation, search, account and cart | Online shops and catalogs | Separate shopping utilities from primary content navigation. |
| Institutional or utility | Organization identity, main navigation, language or audience links | Universities, government, nonprofits and multilingual sites | Give language and main navigation separate accessible names. |
These are design directions rather than fixed templates. Choose contents from real user tasks: identity and the pages visitors need most often come first; add search, language links or a prominent action only when they earn their space.
Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchWindows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallA semantic, responsive header you can use
The following complete example has a skip link, a home-linked logo, separately named navigation, a search form, and a mobile menu button. The button’s JavaScript is intentionally small; you can replace it with your own menu component.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Example site</title>
<style>
:root { --ink:#172033; --muted:#526078; --brand:#155eef; --line:#d7deea; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); font:16px/1.5 system-ui,sans-serif; }
.skip-link { position:absolute; left:1rem; top:-4rem; padding:.6rem .8rem;
background:#fff; color:var(--ink); z-index:10; }
.skip-link:focus { top:1rem; }
.site-header { border-bottom:1px solid var(--line); background:#fff; }
.header-inner { max-width:72rem; margin:auto; padding:.8rem 1rem;
display:flex; align-items:center; gap:1.25rem; }
.brand { color:var(--ink); font-weight:700; text-decoration:none; white-space:nowrap; }
.main-nav ul, .utility-nav ul { display:flex; gap:1rem; list-style:none; margin:0; padding:0; }
.main-nav a, .utility-nav a { color:var(--ink); text-decoration:none; }
.main-nav a:focus-visible, .utility-nav a:focus-visible, .brand:focus-visible,
button:focus-visible, input:focus-visible { outline:3px solid #ffbf47; outline-offset:3px; }
.search { margin-left:auto; display:flex; gap:.4rem; }
.search input { width:12rem; padding:.45rem; border:1px solid var(--line); border-radius:.3rem; }
.search button, .menu-button { border:0; border-radius:.3rem; padding:.5rem .75rem;
background:var(--brand); color:#fff; cursor:pointer; }
.menu-button { display:none; }
@media (max-width: 52rem) {
.header-inner { flex-wrap:wrap; }
.menu-button { display:block; margin-left:auto; }
.main-nav, .utility-nav, .search { display:none; width:100%; }
.main-nav[data-open="true"], .utility-nav[data-open="true"], .search[data-open="true"] { display:block; }
.main-nav ul, .utility-nav ul { flex-direction:column; padding-top:.75rem; }
.search { margin-left:0; }
.search input { width:calc(100% - 5rem); }
}
</style>
</head>
<body>
<a class="skip-link" href="#main-content">Skip to main content</a>
<header class="site-header">
<div class="header-inner">
<a class="brand" href="/">Northstar Studio</a>
<button class="menu-button" type="button" aria-expanded="false" aria-controls="main-nav utility-nav site-search">Menu</button>
<nav class="main-nav" id="main-nav" aria-label="Main navigation">
<ul><li><a href="/work">Work</a></li><li><a href="/services">Services</a></li><li><a href="/about">About</a></li></ul>
</nav>
<nav class="utility-nav" id="utility-nav" aria-label="Utility navigation">
<ul><li><a href="/contact">Contact</a></li></ul>
</nav>
<form class="search" id="site-search" role="search" action="/search">
<label for="q">Search</label><input id="q" name="q" type="search"><button type="submit">Go</button>
</form>
</div>
</header>
<main id="main-content" tabindex="-1"><h1>Page title</h1></main>
<script>
const button = document.querySelector('.menu-button');
const regions = document.querySelectorAll('.main-nav,.utility-nav,.search');
button.addEventListener('click', () => {
const open = button.getAttribute('aria-expanded') === 'true';
button.setAttribute('aria-expanded', String(!open));
regions.forEach(region => region.dataset.open = String(!open));
});
</script>
</body>
</html>The DOM order is the intended reading and keyboard order. CSS changes presentation at a narrow width but does not move controls into a confusing sequence. The W3C Design System header example demonstrates the same principle of a logo link plus separately labeled language and main-navigation regions; its banner and language links are optional, not requirements.
Build your header in the right order
- Inventory tasks. List the destinations and actions visitors use repeatedly. Remove links that belong in a page footer or a contextual subnavigation.
- Choose landmarks. Use one site-wide
<header>, one<nav>for the primary links, and additional<nav>elements only for genuinely separate groups. If there is more than one navigation landmark, give every one a usefularia-label, such as “Main navigation” and “Language options.” - Write native controls. Use anchors for destinations, buttons for actions, and a real form for search. Preserve visible focus and a sensible tab order.
- Style with flexbox or grid. Set a readable type scale, sufficient contrast, predictable spacing and a logo size that does not overpower the links.
- Design by available space. Let the arrangement reflow or simplify when the content no longer fits. There is no universal “tablet breakpoint”; the breakpoint belongs where your actual header becomes cramped. W3C’s responsive guidance explains why presentation may change across viewport sizes: WAI reflow guidance.
- Add a bypass. Put a skip link near the start of the document and point it at
<main>. This lets keyboard users bypass repeated navigation, as described in MDN keyboard accessibility guidance.
Responsive and accessible behavior to verify
- Tab from the browser address bar: the skip link appears, then the logo, menu button, links and form controls in a logical order.
- Every focused control has a visible outline that is not clipped by a header with
overflow:hidden. - The mobile button exposes its state with
aria-expandedand controls the regions named byaria-controls. - At the narrow layout, links remain large enough to activate and the search field remains usable without horizontal scrolling.
- Screen readers hear distinct navigation names rather than two identical “navigation” landmarks.
- Search labels, link text and button text describe the result or action without relying on an icon alone.
How to compare header variants
Evaluate alternatives against the same five questions:
| Axis | Question |
|---|---|
| Content priority | Are the most frequent tasks visible, and is the number of links manageable? |
| Information architecture | Are distinct groups separated into named navigation regions? |
| Viewport behavior | Does the layout reflow before it becomes cramped or causes horizontal scrolling? |
| Keyboard and assistive technology | Can users bypass repeated links, see focus and understand every control? |
| Visual identity | Do type, color, spacing and logo treatment fit the organization while preserving legibility? |
Common implementation failures and fixes
The entire header is one giant link
Cause: a clickable wrapper was used instead of individual controls. Fix: make only the logo a home link; keep navigation links and buttons separate.
Two navigation areas sound identical
Cause: multiple unlabeled <nav> landmarks. Fix: add specific labels such as “Main navigation,” “Utility navigation” or “Language options.”
The mobile menu looks open but is inaccessible
Cause: CSS hides or shows links without updating button state. Fix: synchronize visibility with aria-expanded, return focus appropriately when a full dialog-style menu closes, and test with keyboard only.
Focus disappears
Cause: a reset removed outlines or a custom color has insufficient contrast. Fix: retain a high-contrast :focus-visible style and test it on every header background.
Desktop links wrap unexpectedly
Cause: the header was tuned to one viewport and has no reflow strategy. Fix: allow wrapping, collapse secondary links, or switch to a menu at the width where your content stops fitting; do not choose a breakpoint solely from a device-label chart.
Rank #3
Cookie banners or chat widgets ruin visual checks
Cause: an automated screenshot captures overlays that a normal visitor would dismiss. Fix: use a capture workflow that handles consent and removes known overlays before saving the image.
Or skip the browser setup
ScreenshotNeo is a website screenshot API and MCP server for developers. It is useful for checking header changes across viewports or generating documentation images without wiring up a browser yourself. A GET request returns PNG, JPEG, WebP or PDF; the API accepts full-page capture, device and viewport settings, dark mode, custom CSS and JavaScript, selector waits, click actions, hidden selectors, cookies and headers, geolocation and timezone, transparent backgrounds, resizing, caching, signed links, asynchronous webhooks and bulk capture of up to 100 URLs per call. Its 63 options include the parameter names used by other screenshot APIs, which can simplify migration.
Example request (the ScreenshotNeo documentation lists all parameters):
Rank #4
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpimport requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);Before capture, ScreenshotNeo accepts cookie or consent banners and removes more than 60 known consent platforms, newsletter popups and chat widgets; each step can be disabled. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads and cache hits cost nothing, and response headers report the page verdict and whether it was billed. Its MCP server provides take_screenshot, get_page_info and capture_pdf for Claude, Cursor and other MCP clients.
Free tools Windows power users keep installed
One-click scans. No signup required.
The Free plan includes 1,000 screenshots per month with no card. Paid plans start at $5 for 3,000 shots; every feature is available on every plan, and yearly billing gives two months free. Create a free ScreenshotNeo account to test your header capture workflow.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.FAQ
Is <header> a replacement for <h1>?
No. A header is a landmark/container. Add the page’s appropriate heading separately, usually inside <main> or a section.
Should every page have exactly one header element?
A document normally has one site-wide header, but sectioning elements can also contain their own headers for local introductory content. Give each region the structure and heading appropriate to its scope.
Do I need a hamburger menu on mobile?
Only when the available width requires it. A short navigation may remain visible; a longer one should collapse into a clearly labeled, keyboard-operable control.
The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Frequently Asked Questions
Can a logo image be used instead of text?
Yes. Keep meaningful alternative text on the image, or include visually hidden text if the logo itself does not convey the site name.
Where should language links go?
Place them in a separate, labeled navigation region when they are a real user need; do not mix them indistinguishably with primary content links.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
