<header> - HTML Header Tag

Definition

The <header> tag contains introductory content or navigational links. It may also include a logo, search form, author name, and other introductory elements.

Example

<!DOCTYPE html>
<html>
  <head>
    <title>HTML Title Element goes here.</title>
  </head>
  <body>
    <header>
      <h1>Page Title</h1>
    </header>
    <p>The main content of your page.</p>
  </body>
</html>

Usage

A <header> is not sectioning content so does not introduce a new section in the outline.

A <header> may be used for a main page, or some other sectioning content, for example an <article>:

<article>
<header>
  <h2>Title </h2>
  <p>Posted on Wednesday, <time datetime="2021-02-05">5 February 2021</time> by Jonathan Griffin</p>
</header>
<p>Paragraph of content summary goes here</p>
<p><a href="https://www.thewebmaster.com/html/tags/header/">Read more.</a></p>
</article>

A <header> element must not be a descendant of an <address>, <footer> or another <header> element.

A <header> element can only be nested insider another <header> element if it is first contained within sectioning content, such as <aside>:

<!DOCTYPE html>
<html>
<head>
  <title>HTML Title Element goes here.</title>
</head>
<body>
<header>
  <h1>Page Title</h1>
    <aside>
      <header>
        <h2>About the author: Jonathan Griffin</h2>
        <p>Editor, SEO Consultant, & Developer.</p>
      </header>
      <p>Expertly modest in almost everything that matters.</p>
    </aside>
</header>
<p>The main content of your page.</p>
</body>
</html>

Both the opening and closing tags are required.

Attributes

The Header element only supports the Global Attributes.

Specification

Browser Support

Desktop

Chrome	Edge	Firefox	IE	Opera	Safari
Yes	Yes	Yes	Yes	Yes	Yes

Mobile

Android Webview	Chrome Android	Firefox Android	Opera Android	iOS Safari	Samsung Internet
Yes	Yes	Yes	Yes	Yes	Yes