HTML <header> Tag – Proper Understanding and Usage

Definition and Usage

The <header> tag is typically used to represent the global header at the top of a webpage, or the introductory content of a section or article.

Representing the Global Header

The <header> tag is typically used to represent the overall header section at the top of a webpage.
This area may include the website's title, logo, and primary navigation menus.

The role attribute value banner provides a clearer semantic meaning as an extension of the HTML element concept. It is used to enhance web accessibility for screen reader users. To explicitly indicate a global header, use role="banner".

Here is an example of the <header> tag used as a global header:

If the role="banner" attribute is not explicitly assigned to the <header> tag, screen readers will determine whether it represents a global header based on the context of the HTML document.

Alternatively, you can use a <div> with role="banner" to explicitly indicate the global header without using the <header> tag:

Representing the Introductory Content of a Section or Article

The <header> tag is also used to represent the introductory content of a piece of text or content.

Besides the global header, the <header> tag is used to provide a brief introduction, summary, or lead-in before the main content of a webpage. This helps give semantic meaning and improve content comprehension.

It is commonly used as a child element of the following HTML elements:

<article>
<aside>
<main>
<nav>
<section>

When used as a child of these elements, the <header> tag is not considered a global header, and the role attribute value is not treated as banner.

Here is an example of the <header> tag used as introductory content within an article:

HTML

<article>
    <header>
        <h2>Introduction to HTML</h2>
        <p>
            <time datetime="2022-05-13">May 13, 2022</time> by CodingCourses
        </p>
    </header>
    <p>
        HTML (HyperText Markup Language) is the fundamental language used to create web pages...
    </p>
    <p>
        <a href="https://example.com/html">Read more...</a>
    </p>
</article>

Syntax Structure

Multiple <header> tags can exist within a single HTML document.

However, there are certain disallowed descendant and ancestor elements for the <header> tag.
These restrictions exist because improper usage can make it harder to interpret the structure and meaning of your webpage content. It is important to consider these rules when using the <header> tag.

Not Permitted Content

The following elements are not permitted as descendants of a <header> tag:

<header>
<footer>

Not Permitted Parents

The following elements are not permitted as ancestors of a <header> tag:

<address>
<footer>
<header>

Notes

The <header> tag often contains heading elements (<h1>~<h6>), but these are not required. It can also be used to group elements such as a section's table of contents, a search form, or a related logo.