Home » HTML header tag Explained: Usage, Examples & Best Practices

HTML header Tag Explained: Usage, Examples & Best Practices

Introduction

If you’re just starting with web development, you’ll quickly hear about HTML and something called semantic elements. HTML is the foundation of every website—it structures content so browsers and users can understand it.

Earlier, developers used generic tags like <div> for everything. But modern HTML introduced semantic tags, which clearly describe the meaning of content. This makes websites more readable—for both humans and search engines.

Learn basics here: /html-basics

One of the most important semantic elements is the HTML header tag. It defines the introductory section of a webpage or a section.

Think of it like the cover page of a book—it tells users what the page is about and often includes navigation, titles, and branding.

What is the <header> tag in HTML?

The <header> tag is a semantic HTML element used to define the introductory section of a webpage or a section, typically containing headings, logos, and navigation links.

The <header> element helps organize content in a meaningful way. It usually appears at the top of a page or section and gives users their first impression.

It can include:

  • Website logo
  • Page title (<h1>)
  • Navigation menu (<nav>)
  • Search bar
  • Author info (in articles)

Learn more about semantic HTML: /semantic-html-guide

Basic Syntax of header

Here’s the simplest header tag example:

<header>
  <h1>My Website</h1>
</header>

Explanation (Line by Line)

  • <header> → Starts the header section
  • <h1> → Main heading of the page
  • </header> → Ends the header section

This creates a simple top section that introduces your website.

Even though this example is basic, in real projects, the header often contains more elements like navigation and branding.

Where to Use header Tag

Where is <header> used?
The <header> tag is used at the top of a webpage or inside sections and articles to introduce content with titles, navigation, or metadata.

The <header> tag is flexible and can be used in multiple places.

Top of the Webpage

This is the most common usage. It defines the main site header.

<header>
  <h1>My Blog</h1>
  <nav>
    <a href="#">Home</a>
    <a href="#">About</a>
  </nav>
</header>

Inside Sections or Articles

Each section can have its own header.

<article>
  <header>
    <h2>How to Learn HTML</h2>
    <p>By John Doe</p>
  </header>
  <p>Content goes here...</p>
</article>

Multiple Headers on One Page

Yes, you can use multiple <header> tags—one per section.

This is perfectly valid in HTML5.

Real-World Examples

Let’s look at how the HTML header tag is used in real websites.

Example 1: Website Header (Logo + Navigation)

<header>
  <div class="logo">MySite</div>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>

What’s happening here?

  • Logo represents branding
  • Navigation helps users move around
  • Everything is grouped inside <header>

This is the most common structure used in modern websites.

Example 2: Article Header (Title + Author + Date)

<article>
  <header>
    <h1>Understanding HTML Header Tag</h1>
    <p>By Arvinder | April 2026</p>
  </header>
  <p>This article explains...</p>
</article>

Why this matters:

  • Makes content structured
  • Improves readability
  • Helps search engines understand context

header vs head

Many beginners confuse these two—but they are completely different.

Learn more: /html-tags-guide

Feature<header><head>
PurposeVisible contentMetadata
LocationInside bodyInside html
UsageUI sectionPage settings
ExampleLogo, navTitle, meta

Simple Explanation:

  • <header> → What users see
  • <head> → What browsers use internally

Best Practices

To use the <header> tag effectively, follow these best practices:

1. Use Semantic Structure

Always use <header> where content introduces a section.

Bad:

<div class="header">

Good:

<header>

2. Avoid Overuse

Don’t wrap everything in <header>. Use it only for introductory content.

3. Combine with <nav>

Headers often contain navigation menus.

<header>
  <nav>...</nav>
</header>

4. Keep It Meaningful

Only include relevant content like:

  • Titles
  • Logos
  • Navigation
  • Intro text

Avoid unnecessary elements.

Common Mistakes

Let’s fix some beginner mistakes.

Confusing <header> with <head>

This is the most common issue.

Remember:

  • <head> = invisible settings
  • <header> = visible UI

Using <header> for Styling Only

Don’t use it just to apply CSS.

Wrong approach:

<header class="blue-box">

Use it for meaning first, styling second.

Incorrect Placement

Avoid placing <header> randomly.

Correct placement:

  • At the top of page
  • Inside sections/articles

SEO Benefits of header

Using the HTML header tag correctly can improve your website’s SEO.

1. Better Structure

Search engines understand your page layout better.

2. Improved Accessibility

Screen readers can easily identify important sections.

3. Clear Content Hierarchy

Headers help define:

  • Main topics
  • Subsections
  • Navigation

4. Enhanced User Experience

A well-structured header helps users navigate quickly, reducing bounce rate.

FAQs Section

1. What is the header tag in HTML?

The <header> tag defines the introductory section of a webpage or section, including titles and navigation.

2. Can I use multiple <header> tags?

Yes, you can use multiple headers inside different sections or articles.

3. What is inside a <header> tag?

It can contain headings, logos, navigation links, and introductory content.

4. Is <header> important for SEO?

Yes, it improves structure, accessibility, and helps search engines understand your content.

5. What is the difference between <header> and <head>?

<header> is visible content, while <head> contains metadata and is not displayed.

Scroll to Top