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) Doesdo? - 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.
- Display
- inline
Contents
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”.
<body>
<header>
<a src="/" id="logo">Site Title</a>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
</header>
<main>
.
.
.
</main>
<footer>
.
.
.
</footer>
</body>
As a section header
<article>
<header>
<h2>Title of Article</h2>
<span class="byline">by Arthur T. Writer</span>
</header>
<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>
</article>
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).
Browser Support for header
 |  |  |  |  |  |
| 11 | 43 | 45 | 13 | 9 | 34 |