header Element in HTML
Semantic Tag with Examples

Semantic HTML

HTML <header> Element: Introductions With Meaning

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.

Purpose of <header>

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.

Basic Syntax

<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.

Where Can You Use <header>?

  • 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.

Difference Between <header> and <head>

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

| Element | Purpose | |---------------|---------------------------------------| | <head> | Contains metadata, links, scripts | | <header> | Contains visible page/section intro |

Accessibility and Semantics

<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>

Real-World Example: Full Page with <header>

<!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.

Summary

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

What’s Next?

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

QUIZ

Question 1:What is the main purpose of the <header> element in an HTML document?

Question 2:Multiple <header> elements can be used within a single HTML page to define headers for different sections.

Question 3:Which of the following elements are commonly found inside a <header> element?

Question 4:How does using the <header> element improve accessibility?

Question 5:The <header> element is mandatory in every HTML document.

Question 6:Which of the following are best practices when using the <header> element?