HTML <header> Tag

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The <header> element represents a container for introductory content or a set of navigational links for a section of a webpage or the page as a whole. It is a semantic element, meaning it conveys meaningful structure to both developers and browsers, making the content more understandable and accessible.

Typically, a <header> contains elements like:

Headings (<h1>–<h6>) that introduce the section or page.
Logos or branding elements to identify the site or organization.
Navigation menus or links related to the section it introduces.
Introductory text or summaries relevant to the content that follows.

A <header> can appear in several contexts:

Page-level header: Placed at the top of the <body> to provide the main introduction, branding, and primary navigation for the entire page.
Section-level header: Used within <section>, <article>, <aside>, or <main> elements to introduce that particular section or content block.

Key characteristics of <header>:

It does not necessarily contain the heading of the document; instead, it serves as a semantic wrapper for introductory or navigational content.
A page can have multiple <header> elements, each pertaining to a different section or article.
It is distinct from <footer>, which typically contains closing information, author details, or related links.

Using <header> improves the semantic structure of a webpage, aiding in accessibility, SEO, and content organization. Screen readers and search engines can better interpret the page’s layout and hierarchy when <header> is used appropriately.

Properties

Permitted Parents: Any element that accepts flow content. Note that a <header> element must not be a descendant of an <address>, <footer> or another <header> element.
Content: Block, Inline and text elements, but no <header> or <footer> descendants.
Start/End Tags: Start tag: required, End tag: required

Example

HTML

<!DOCTYPE html>

<html>

  <head>

    <title>Untitled 1</title>

  </head>

  <body>

    <header>

      <h1>Header of Page</h1>

    </header>

    <article>

      <p>Description and information of page goes here.</p>

    </article>

    <footer>

      Footer of Page - Copyright

    </footer>

  </body>

</html>

Result

Editor

Attributes

None

Global Attributes

The <header> tag also supports the Global Attributes in HTML5

Event Attributes

The <header> tag also supports the Event Attributes in HTML5

Browser Support

The following information will show you the current browser support for the HTML <header> tag. Hover over a browser icon to see the version that first introduced support for this HTML tag.