HTML <header> Tag Tutorial - Usage, Syntax,
Attributes and Example

calender-iconPublished: 29 May 2025

clock-icon5-min read

printer-icon whatsapp-icon share-icon



close-button
HTML
Table of Contents

INTRODUCTION

The HTML <header> element is used to represent introductory content or a container for navigational links. It is a semantic element, meaning it gives meaning to the structure of the webpage. It typically includes headings, logos, navigation menus, or other introductory elements at the beginning of a section or a webpage.

This element can be used multiple times on a page (e.g., for the main page header or inside <article>, <section>, <aside>, <main>, <nav> elements).

The HTML <header> element must not be a descendant of an <address>, <footer> or another <header> element.

Example: 

<header>
  <h1>My Website</h1>
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
</header>
Output:

My Website



Attributes

The <header> element only includes global attribute.



Tag Omission

The HTML <header> element must have both start tag and end tag.

Frequently Asked Questions(FAQ)

What is the use of the <header> tag in HTML5?
The <header> element in HTML5 is used to represent introductory content or a container for navigational links. It is typically used at the beginning of a section or page to provide context about its content.

Can multiple <header> elements be used in a single HTML document?
Yes, multiple <header> elements can be used within a single HTML document. Each <header >typically applies to its nearest ancestor sectioning content or sectioning root element, such as <section> or <article>. ​

What is the difference between the HTML <header> and <head> elements?
The <header> element is used for visible content at the beginning of a section or page, such as navigation links or introductory information. In contrast, the <head> element contains meta-information about the document, like its title and links to stylesheets or scripts, which are not displayed on the page.

What elements are typically included within a <header> element?
A <header> element typically contains one or more heading elements (<h1>–<h6>), a logo or icon, authorship information, and sometimes a <nav> element with navigational links.

Are there any elements that should not be placed within a <header> element?
Do NOT place <footer>, <main>, <section>, <article> or nested <header> inside <header> element.

In HTML5, should the main navigation be inside or outside the <header> element?
The main navigation (<nav>) can be placed inside or outside the <header> element, depending on the website’s structure and semantics. However, the best practice is usually to place <nav> inside <header> when it is part of the site’s introduction.

Can the <header> element be used inside the <article> or <section> elements?
Yes, the <header> element can be used inside <article> or <section> elements to represent introductory content specific to that section or article.