<header>

<header> groups introductory content or navigation for a page or section. It may contain a title, author information, branding, or navigation. It does not automatically pin content to the top of the viewport.

Page and article introductions

The outer header introduces the whole document. The article header introduces only that article.

<header>
  <p>Garden notes</p>
  <nav aria-label="Primary"><a href="#story">Latest story</a></nav>
</header>
<main>
  <article id="story">
    <header>
      <h1>Starting a balcony garden</h1>
      <p>By Alex Example</p>
    </header>
    <p>Begin with one pot and learn how quickly its soil dries.</p>
  </article>
</main>

header {
  border-bottom: 1px solid #94a3b8;
  padding-bottom: 0.5rem;
}

Context changes the role

A page-level header exposes a banner landmark. Nested in an article, section, main, aside, or nav, it is a generic introduction rather than another banner. Do not add aria-label to a generic article header as a blanket accessibility recipe.

A header accepts flow content but must not contain another header or a footer. It does not create a section or determine a heading rank. Use h1–h6 according to the document’s actual structure.

Choose the right element

<head> contains document metadata and is different from a visible header. nav gives a major navigation block its own meaning. Use CSS position when you need sticky behavior; the header tag alone does not provide it.

Sources and browser support

MDN: header describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.