HTML header Element

Every story has a beginning — and in HTML, that beginning often lives in a <header>. This semantic element represents the introductory content of a page or a section. It's not just about visual design — it's about giving structure and meaning to where things begin.

The <header> element is used to group introductory content — like titles, logos, navigation, and brief summaries. It can be used once at the top of the page or within individual sections or articles.

Think of it as the handshake of your content.

<header>
  <h1>Fruit Blog</h1>
  <nav>
    <a href="#apple">Apple</a>
    <a href="#banana">Banana</a>
  </nav>
</header>

Fruit Blog  
[ Apple | Banana ]

This header introduces the page and includes navigation for fruit-related topics.

• At the top of the entire document — introducing the whole page
• Inside <article> or <section> — as a local heading

Example: Section with Header

<section>
  <header>
    <h2>Cherry Facts</h2>
    <p>Everything you need to know about cherries.</p>
  </header>
  <p>Cherries are small, round, and rich in antioxidants...</p>
</section>

This use clearly introduces the section without affecting the main page header.

These two are often confused. Here’s a quick distinction:

<header> helps screen readers and assistive technologies understand the structure of your content. It improves navigability for users with disabilities by grouping related introductory content.

Best Practices:

• Use only one <header> per section
• Include <h1> to <h6> inside headers to clarify hierarchy
• Avoid placing <header> inside a <footer> or <address>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Fruit World</title>
</head>
<body>

  <header>
    <h1>Welcome to Fruit World</h1>
    <nav>
      <a href="#apple">Apple</a> |
      <a href="#banana">Banana</a> |
      <a href="#cherry">Cherry</a>
    </nav>
  </header>

  <main>
    <section id="apple">
      <header>
        <h2>Apple Section</h2>
      </header>
      <p>Apples are crispy and sweet.</p>
    </section>
  </main>

</body>
</html>

Welcome to Fruit World  
[ Apple | Banana | Cherry ]

Apple Section  
Apples are crispy and sweet.

The <header> element creates a meaningful introduction for content. You’ve learned how to:

• Use <header> for pages, articles, and sections
• Include navigation and headline content
• Improve accessibility and content clarity

Choose the option that lists all and only the correct statements.

1. <h1> to <h6> headings
2. <nav> navigation
3. <footer>
4. <img> logos or branding

Choose the option that lists all and only the correct statements.

1. Place site title or logo inside the header
2. Use <header> only once per page
3. Include navigation menus inside the header
4. Nest <header> within <section> or <article> for section headers

Up next: we’ll explore the <footer> element — the closing act that wraps up content meaningfully and semantically.