HTML <header> element

The <header> element groups introductory content or navigation aids for a page or section. It can act as a front door to the content, giving the reader a title, opening context, or a way to find what they need.

A page-level header might contain a logo, site name, main heading, short description, and navigation. A header inside an <article> might contain the article title, author line, publication date, or short introduction.

The enclosing structure determines what the header introduces. Inside an <article> or <section>, it introduces that section; <aside> and <nav> can also have headers. Without an enclosing sectioning element, it applies to the page. A plain <div> wrapper does not create a new section for it.

A header does not create a section itself, and the tag does not position its content at the top of the screen. CSS controls the layout. For a purely decorative strip or layout wrapper, use <div>.

A header can contain headings, paragraphs, links, navigation, search, images, and other suitable introductory material. A heading is common but not required, and a heading can also stand on its own without a header around it.

A header must not contain another <header> or a <footer>, even through intermediate containers. A page can still have several headers in separate places, such as the site header and the headers of individual articles.

Attributes: GLOBALS.

Typical layout:
<header>
  <h1>HTML reference</h1>
  <p>Clear notes on HTML elements.</p>
</header>

<main>
  <h2>Paragraphs</h2>
  <p>The p element represents a paragraph.</p>
</main>

Visual representation: