Header HTML CSS Tag Element

<Header> HTML CSS Tag Element Tutorials

Definition and Usage

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

A <header> element typically contains:

one or more heading elements (<h1> - <h6>)

logo or icon

authorship information

Example

A header for an <article>:

<article>
  <header>
    <h1>A heading here</h1>
    <p>Posted by John Doe</p>
    <p>Some additional information here</p>
  </header>
  <p>Lorem Ipsum dolor set amet....</p>
</article>

Example

A page header:

<header>
  <h1>Main page heading here</h1>
  <p>Posted by Jim</p>
</header>

Default CSS Settings

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

header {
  display: block;
}

Try Now