0%

<header> Header

Introductory content: the site logo and navigation, or the top of an article.

By HTML6 (opens in a new tab) · Updated · How we write and check content

<header> holds introductory content. At the top of a page that usually means the logo, the site name and the main navigation, and there it acts as the banner landmark.

An <article> or <section> can have its own header too, with its heading, author and date. Keep it apart in your head from the <head> element and from headings: a header is a container, and it usually includes a heading. Never nest a header inside a footer or inside another header.

When a header turns into a banner is explained in the header element section of the HTML standard (opens in a new tab). Practise with the Header, Nav, Main, Footer lesson.

Syntax

<header>
  <h1>Site or section title</h1>
</header>

When to use it

A page-level header is the band that repeats at the top of every page: logo, site name, main menu, search box. Inside an article it makes a good home for the headline, byline and publish date, set apart from the body text.

A single heading does not need a header around it; an <h2> on its own is fine. With a large hero block (an image and a slogan, say), ask whether it introduces the whole site or only this page. A hero that is unique to the page usually fits better as the start of <main>.

Whether a header counts as the banner landmark depends on where it sits. Inside article, aside, main, nav or section it is a plain group, so the same template part can be a landmark on one page and not on the next. If your layout wraps everything in a <main>, the site header loses its role. Build both kinds in the header, nav, main and footer lesson.

Live example

Edit the code and watch the preview.

<header>
  <img src="logo.svg" alt="HTML Schools" width="200" height="60">
  <nav>
    <a href="index.html">Home</a>
    <a href="about.html">About</a>
  </nav>
</header>
<p>Page content follows the header.</p>

More examples

Article header with a byline

Inside an article, the header groups the headline with the author and the publish date. The <time> element gives the date in a machine-readable form. This header is not a banner landmark, because it belongs to the article.

<article>
  <header>
    <h2>Ten tips for better sourdough</h2>
    <p>By <a href="ana.html">Ana Lopez</a>, <time datetime="2026-03-14">14 March 2026</time></p>
  </header>
  <p>Good bread starts with a lively starter. Feed it the night before.</p>
</article>

Site header with logo, menu and search

A typical page header holds the logo, the main navigation and a search box. Simple inline-block CSS lines them up. Because it sits directly in the body, this header is exposed as the banner landmark.

<style>
header{background:#f4f4f4;padding:8px}
header img,header nav,header search{display:inline-block;vertical-align:middle;margin-right:16px}
</style>
<header>
  <img src="logo.svg" alt="HTML Schools" width="200" height="60">
  <nav aria-label="Main">
    <a href="learn.html">Learn</a>
    <a href="reference.html">Reference</a>
  </nav>
  <search>
    <form action="/search">
      <input type="search" name="q" aria-label="Search the site">
      <button>Go</button>
    </form>
  </search>
</header>

Tip: header is a visible section. head is the invisible metadata container.

Browser support

The header element was introduced with HTML5 and works in all current browsers. Very old browsers such as Internet Explorer 8 did not recognise it without a script workaround, which no longer matters for real visitors. Browsers expose a page-level header to assistive technology as the banner landmark.

Accessibility

The page-level header becomes the banner landmark, and screen reader users can jump to it directly. Keep it for site-wide content like the logo and the main navigation. The W3C ARIA landmarks guidance (opens in a new tab) shows how the banner region is exposed.

Common mistakes

Wrong

<header>
  <header>Logo</header>
</header>

Right

<header>
  <a href="/">Logo</a>
  <nav>...</nav>
</header>

Headers do not nest. One header inside another is invalid.

Frequently asked questions

Can I use more than one header tag on a page?

Yes. A <header> introduces its nearest sectioning ancestor, so you can have a site header plus one in each <article> or <section>. Only a header outside article, aside, main, nav and section is exposed as the banner landmark, which normally leaves one banner per page. At the other end of a section sits its counterpart, the footer element.

Does the header element need a heading inside it?

No, it is optional. Most headers do contain the section's heading (<h1> to <h6>), next to a logo, a byline or some navigation. A header may not contain another <header> or a <footer>. And if all you have is a heading, skip the header wrapper.

Practise it

Related sections elements

<nav>Wraps the major navigation links.<main>The page's unique, central content. One per page.<footer>Closing content for a page or section, like copyright, contacts and related links.<article>Self-contained content that makes sense alone, such as a post, card or comment.<section>A themed group of content, normally with its own heading.<aside>Content related to the main content but set apart from it, such as a sidebar.<h1>The top-level heading, naming what the page is about.<h2>A main section heading, one step below h1.<h3>A subsection heading inside an h2 section.<h4>Heading for a subsection of an h3 section.<h5>Fifth-level heading, used inside an h4 section.<h6>The lowest heading level, used inside an h5 section.<hgroup>Ties a heading to its subtitle or tagline paragraphs.<address>Contact details for the person or organization behind a page or article.<search>Wraps a search or filter form and creates a search landmark.