Path // www.yourhtmlsource.com → Reference → <header>

<header>

The <header> element represents introductory content or a set of navigational aids. It typically contains the section's heading (h1-h6 or hgroup), but can also include other elements like a logo, search form, author name, or table of contents. A page can have multiple headers, each belonging to different sectioning elements.

Page Navigation:
Syntax | Attributes | Examples | When to Use | Related Elements

This page was last updated on 2025-11-17

Syntax

<header>
<h1>Page or Section Title</h1>
<p>Introductory text or tagline</p>
</header>

The element requires both opening and closing tags. A header can contain any flow content except for another header element or a footer element. The header element is not sectioning content; it doesn't introduce a new section in the outline.

Attributes

Global attributes - The <header> element supports all global attributes such as id, class, style, lang, and dir.

The <header> element has no element-specific attributes.

Examples

Page Header with Navigation

<header>
  <img src="logo.png" alt="Company Logo">
  <h1>Company Name</h1>
  <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>

Article Header

<article>
  <header>
    <h2>Getting Started with Semantic HTML</h2>
    <p>A comprehensive guide for beginners</p>
    <p>By <a href="/author/jane">Jane Doe</a> | <time datetime="2024-03-15">March 15, 2024</time></p>
  </header>
  <p>Article content...</p>
</article>

Section Header with Table of Contents

<section>
  <header>
    <h2>Chapter 3: Advanced Techniques</h2>
    <nav>
      <h3>In this chapter:</h3>
      <ul>
        <li><a href="#section1">Performance Optimization</a></li>
        <li><a href="#section2">Security Best Practices</a></li>
      </ul>
    </nav>
  </header>
  <p>Section content...</p>
</section>

When to Use

Use the <header> element when:

Creating the main page header with logo and navigation
Adding introductory content to an article or section
Including a heading with metadata (author, date, etc.)
Grouping a section's heading with a table of contents
Adding a search form as part of site navigation
Including a tagline or subtitle with the main heading

Do NOT use <header> when:

You only have a heading with no other introductory content (just use h1-h6 directly)
You need to nest headers inside each other (not allowed)
You want to include a footer (headers cannot contain footers)

Important: The header element is different from the <head> element. The head contains metadata about the document, while header contains introductory content visible on the page.