Skip to content
html.sh

<header> - Header Element

The <header> Element

Section titled “The <header> Element”
Landmark HTML5

The <header> element represents introductory content, typically containing headings, logos, navigation, search forms, or author information. It can be used as a page header (banner) or as a header for sections, articles, and other content groupings.

Quick Example

Section titled “Quick Example”
Result

Syntax

Section titled “Syntax”
<header>
  <!-- Introductory content: headings, logos, navigation, etc. -->
</header>

Attributes

Section titled “Attributes”

Element-Specific Attributes

Section titled “Element-Specific Attributes”

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

Global Attributes

Section titled “Global Attributes”

This element supports all global attributes.

Common Use Cases

Section titled “Common Use Cases”

Site-Wide Page Header

Section titled “Site-Wide Page Header”

The most common use is a page header with branding and navigation:

Result

Article Header with Metadata

Section titled “Article Header with Metadata”

Headers can contain article metadata like author, date, and tags:

Result
Section titled “Header with Logo and Search”

A header combining branding, navigation, and search functionality:

Result

Section Header

Section titled “Section Header”

Headers can introduce sections of content:

Result

Blog Post Header

Section titled “Blog Post Header”

A comprehensive blog post header with all relevant metadata:

Result

Best Practices

Section titled “Best Practices”

Use for Introductory Content

Section titled “Use for Introductory Content”

The header should contain introductory or navigational content:

<!-- Good: Introductory content -->
<header>
  <h1>Article Title</h1>
  <p class="byline">By Author Name</p>
</header>


<!-- Avoid: Main content in header -->
<header>
  <h1>Article Title</h1>
  <p>The entire article content should not be here...</p>
</header>

Page Header vs. Section Headers

Section titled “Page Header vs. Section Headers”

You can have multiple headers in a document:

<body>
  <!-- Page header (banner landmark) -->
  <header>
    <h1>Site Name</h1>
    <nav><!-- Global navigation --></nav>
  </header>


  <main>
    <!-- Article header (not a landmark) -->
    <article>
      <header>
        <h2>Article Title</h2>
        <p>Article metadata</p>
      </header>
      <p>Article content...</p>
    </article>


    <!-- Section header (not a landmark) -->
    <section>
      <header>
        <h2>Section Title</h2>
      </header>
      <p>Section content...</p>
    </section>
  </main>
</body>

Don’t Nest Headers

Section titled “Don’t Nest Headers”

Avoid nesting <header> elements:

<!-- Wrong: Nested headers -->
<header>
  <header>
    <h1>Title</h1>
  </header>
</header>


<!-- Correct: No nesting -->
<header>
  <h1>Title</h1>
  <div class="meta">Additional info</div>
</header>

Header Placement

Section titled “Header Placement”

Headers can’t be descendants of <footer> or <address> elements:

<!-- Wrong: Header inside footer -->
<footer>
  <header>
    <h2>Footer Title</h2>
  </header>
</footer>


<!-- Correct: Use appropriate elements -->
<footer>
  <h2>Footer Title</h2>
  <p>Footer content</p>
</footer>

Accessibility

Section titled “Accessibility”
Section titled “Banner Landmark”

A <header> element at the page level (direct child of <body>) becomes a banner landmark:

<!-- This is a banner landmark -->
<body>
  <header>
    <h1>Site Name</h1>
    <nav>Navigation</nav>
  </header>
  <main>Content</main>
</body>

Not Always a Landmark

Section titled “Not Always a Landmark”

Headers inside sectioning elements (<article>, <aside>, <main>, <nav>, <section>) are NOT landmarks:

<main>
  <!-- This header is NOT a landmark -->
  <article>
    <header>
      <h2>Article Title</h2>
    </header>
  </article>
</main>

Heading Hierarchy

Section titled “Heading Hierarchy”

Maintain proper heading hierarchy within headers:

<!-- Good: Proper heading hierarchy -->
<body>
  <header>
    <h1>Site Name</h1>
  </header>
  <main>
    <article>
      <header>
        <h2>Article Title</h2>
        <h3>Subtitle</h3>
      </header>
    </article>
  </main>
</body>


<!-- Avoid: Skipping heading levels -->
<header>
  <h1>Site Name</h1>
  <h4>Tagline</h4><!-- Skips h2 and h3 -->
</header>

Multiple Banners

Section titled “Multiple Banners”

If you have multiple page-level headers, use aria-label to distinguish them:

<!-- Only relevant if showing/hiding headers dynamically -->
<header aria-label="Primary navigation">
  <h1>Site Name</h1>
  <nav>Main menu</nav>
</header>


<header aria-label="Mobile navigation" hidden>
  <nav>Mobile menu</nav>
</header>

Browser Support

Section titled “Browser Support”
BrowserVersion
Chrome5+
Firefox4+
Safari5+
EdgeAll versions
IE9+
Section titled “Related Elements”

Common Mistakes

Section titled “Common Mistakes”

Using Header for All Headings

Section titled “Using Header for All Headings”
<!-- Wrong: Header for every heading -->
<header><h1>Title 1</h1></header>
<header><h2>Title 2</h2></header>
<header><h3>Title 3</h3></header>


<!-- Correct: Header for introductory groups -->
<header>
  <h1>Main Title</h1>
  <p class="subtitle">Additional context</p>
</header>
<section>
  <h2>Section Title</h2>
  <p>Content...</p>
</section>

Confusing Header with h1-h6

Section titled “Confusing Header with h1-h6”
<!-- Wrong: Confusing <header> with headings -->
<header>Page Title</header>


<!-- Correct: Header contains headings -->
<header>
  <h1>Page Title</h1>
</header>

Header in Wrong Context

Section titled “Header in Wrong Context”
<!-- Wrong: Header inside address -->
<address>
  <header>
    <h2>Contact Info</h2>
  </header>
</address>


<!-- Correct: Use appropriate structure -->
<address>
  <h2>Contact Info</h2>
  <p>Email: [email protected]</p>
</address>

Specifications

Section titled “Specifications”