HTML <header> Tag

The <header> tag defines a section of content that serves as an introduction or summary of the rest of the page. This content can be anything from a brief overview or summary of the page's content to navigation menus, search boxes, logos, and more.

Let's look at some code snippets to help illustrate how the header tag works in action. Here's an example of basic code for creating a header:

<header>
    Header content goes here
</header>

<article>
    <header>
        <h1>Article title</h1>
        <p>
            <time datetime="2017-10-04">4th October 2017</time> | Marry
        </p>
    </header>
</article>

The <header> element is commonly known as a site-wide banner landmark role. However, if nested within sectioning content, the <header> element does not hold that same meaning. It can define a global site header, with features such as a logo, company name, search feature and a global navigation or slogan.

This is normally found at the top of the page. In addition to having this global header, it may also contain the heading (an h1 – h6 element) and an optional subheading for sections in the accessibility tree.