The HTML <header> tag

Definition and Usage

<header> The element represents a container for introductory content or a set of navigation links.

<header> The element usually contains:

  • One or more heading elements (<h1> - <h6>)
  • Logo or icon
  • Author information

Tip:<header> The tag is commonly used to define the document header.

Note:a single HTML document can contain multiple <header> element. However,<header> cannot be placed <footer>,<address> or another <header> in the element.

See also:

HTML DOM Reference Manual:Header object

Example

Example 1

The title of <article>:

<article>
  <header>
    <h1>This is the title</h1>
    <p>Published by Bill Gates</p>
    <p>Here is some additional information.</p>
  </header>
  <p>Here is the main content.... Here is the main content....</p>
</article>

Try It Yourself

Example 2

Header:

<header>
  <h1>This is the homepage title</h1>
  <p>Published by Bill Gates</p>
</header>

Try It Yourself

Global Attributes

<header> The tag also supports Global Attributes in HTML.

event attributes

<header> The tag also supports Event Attributes in HTML.

Default CSS Settings

Most browsers will display the following default values <header> Element:

header {
  display: block;
}

Browser Support

The numbers in the table indicate the first browser version that fully supports the tag.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
5.0 9.0 4.0 5.0 11.1