The header Element

Learn how to use the <header> element to define introductory content for entire pages or specific sections, improving semantic structure and accessibility.

What it is

The <header> element represents a container for introductory content or a set of navigational links. A common misconception is that <header> can only appear once at the very top of an HTML document. In reality, you can use multiple <header> elements within different sectioning content (like <article> or <section>) to provide context-specific introductions.

Mental Model: Think of <header> as the "title card" or "intro paragraph" for whatever block of content it wraps. It often contains headings (<h1>-<h6>), logos, search forms, or author information.

Why it matters

• Semantic Clarity: Helps browsers and assistive technologies understand the structure of your content.
• Accessibility: Screen readers can navigate directly to headers, allowing users to skip repetitive navigation or identify section topics quickly.
• Styling Hooks: Provides a clear CSS target for styling introductory blocks without relying on generic <div> classes.
• SEO Benefits: Search engines better understand the hierarchy and relevance of page sections when proper semantic tags are used.

Syntax or steps

The basic syntax involves wrapping introductory content in opening and closing <header> tags. It is valid inside the <body>, <article>, <section>, <aside>, and <nav> elements.

<header>
  <!-- Introductory content goes here -->
</header>

Example

Here is a realistic example showing two distinct uses: one for the main site header and one for an article's internal header.

<!DOCTYPE html>
<html lang="en">
<body>
  <!-- Site-wide Header -->
  <header>
    <h1>My Blog</h1>
    <p>Thoughts on web development.</p>
  </header>

  <main>
    <article>
      <!-- Article-specific Header -->
      <header>
        <h2>Understanding Semantic HTML</h2>
        <p>Published on October 24, 2023 by Jane Doe</p>
      </header>
      
      <p>Semantic HTML gives meaning to your content...</p>
    </article>
  </main>
</body>
</html>

Part-by-part explanation:

• The first <header> defines the identity of the entire website, containing the main title (<h1>) and tagline.
• The second <header> is nested inside an <article>. It introduces just that specific piece of content with its own heading (<h2>) and metadata (author/date).
• This structure allows screen readers to announce "Article: Understanding Semantic HTML" followed immediately by the relevant intro text, rather than forcing the user to parse through site-wide navigation every time.

Common mistakes

• Using it only once per page: Remember that <header> is scoped to its nearest ancestor sectioning element. You should use it for articles and sections too.
• Confusing it with <nav>: While a header often contains navigation, <header> itself is not a navigation landmark. If the primary purpose is links, consider if <nav> is more appropriate, or nest <nav> inside <header>.
• Placing it inside <footer>: The spec prohibits nesting <header> inside <footer> or vice versa. Keep them as siblings or separate containers.
• Omitting headings: While not strictly required, a header usually implies a title. If there is no heading or introductory text, a simple <div> might be sufficient.

When to use it

Compare <header> with <div> and <section>:

Practice

Guided Exercise: Create an HTML file with a <section> about "Recipes." Inside the section, add a <header> containing an <h2> titled "Dinner Ideas" and a <p> describing the section.

Challenge: Add a second <article> inside that same section for "Pasta Carbonara." Give this article its own <header> with an <h3> and a preparation time note. Verify that both headers render correctly and maintain logical hierarchy.

Quick check

Q: Can you have more than one <header> element in a single HTML document?

A: Yes. You can have one for the main page body and additional ones inside each <article>, <section>, or other sectioning content.

Summary

The <header> element is a versatile tool for defining introductory content at both the page level and the component level. By using it correctly within sections and articles, you create a clearer document outline that benefits developers, search engines, and users relying on assistive technology.