The <header> element
The <header> tag represents introductory content for its nearest ancestor — typically a logo, site title, and navigation when used at the page level, or a heading and byline when used inside an <article>. A single page can have more than one.
Last updated: October 3, 2026
Quick facts
| Category | Flow content, palpable content |
| Content model | Flow content, but no nested <header> or <footer> elements |
| Tag omission | Neither the start nor end tag can be omitted |
| Permitted parents | Any element that accepts flow content, but not a descendant of <address>, <header>, or <footer> |
| DOM interface | HTMLElement |
Syntax
Live example
Edit the code below and watch the preview update instantly.
Attributes
| Attribute | Description |
|---|---|
| — | <header> has no attributes of its own — only the global attributes shared by every HTML element. |
Common examples
A site header with logo and menu
The most common use: the logo linking home, plus the main <nav>.
An article header
Articles can have their own header holding the title, author and date.
A sticky header
Keep the header visible while scrolling with position: sticky. Give it a background so content doesn’t show through.
A header with a search box
Site-wide search often lives in the header. Use a search form with a label (it can be visually hidden) so it’s accessible.
<header> vs <nav>
A <header> is the introductory area of a page or section: it can hold a logo, a title, a search box, a tagline and the navigation. A <nav> is specifically a block of navigation links.
That’s why the nav usually lives inside the header. Use the header for the whole top bar, and nav for just the menu within it. Pages can also have a nav outside the header, such as a sidebar menu or breadcrumbs.
| <header> | <nav> | |
|---|---|---|
| Purpose | Introductory content | Navigation links |
| Can contain | Logo, title, search, nav | Mostly links |
| Typical place | Top of page or article | Inside the header, sidebar |
Common mistakes to avoid
- Confusing
<header>with<head>. The <head> holds invisible page information; the<header>is visible content. - Nesting a header inside a
<footer>or another<header>. That isn’t allowed; use a div if you need an extra wrapper. - Wrapping every heading in a header. A lone
<h2>doesn’t need one; use a header when there’s a group of introductory content. - A sticky header that eats the screen. On phones, a tall fixed header can cover half the content; keep it slim.
Accessibility & SEO tips
- The page-level header becomes the “banner” landmark, so screen reader users can jump to it. Headers inside articles or sections don’t.
- Give the logo link meaningful alt text such as “Acme home” so it makes sense when read aloud.
- Keep important text (like the page’s
<h1>) as real text, not part of an image, so search engines can read it.
Browser support
Supported in all modern browsers, including Chrome, Edge, Firefox, Safari and their mobile versions. It was introduced with HTML5, and only very old browsers such as Internet Explorer 8 needed workarounds.
Tutorial: How to make a navigation bar