New in HTML5.

Learn What HTML Header (New Semantic Document Tag) Does

Disclosure: Your support helps keep the site running! We earn a referral fee for some of the services we recommend on this page. Learn more
Element of
HTML Document Structure Before And After HTML5 – Here’s What Changed
What does Learn What HTML Header (New Semantic Document Tag) Does do?
The <header> element is used to identify content that precedes the primary content of the web page and often contains website branding, navigation elements, search forms, and similar content that is duplicated across all or most pages of a website.

Page or section header

The <header> element is one of several new semantic document tags introduced with HTML5. It is used to define a header section for the element that contains it. It can be used as a header for a whole page (the most common usage), but can also be used as the header for an article or any other piece of on-page content.

As a page header

Typically, when the <header> element is used as a page header, it contains the site’s title or logo (or both) and the main site navigation. This is sometimes known as the “masthead”.

  <a src="/" id="logo">Site Title</a>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/contact">Contact</a></li>

As a section header

  <h2>Title of Article</h2>
  <span class="byline">by Arthur T. Writer</span>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam volutpat sollicitudin nisi, at convallis nunc semper et. Donec ultrices odio ac purus facilisis, at mollis urna finibus. </p>

A single HTML document can have multiple <header> elements. A <header> is always related to the element that contains it (so no element should directly contain two <header> elements).

Adam is a technical writer who specializes in developer documentation and tutorials.

Browser Support for header