HTML Header Tag: The Complete Guide with Examples

The header tag defines the top part of a page or a section in HTML. It usually holds a heading or navigation links. It includes <h1> to <h6> tags, but it is not one of them.

Understand the HTML <header> tag

You can use <header> more than once on a page. You place it inside sections like <article> or <section> to group related content. It helps you show structure to both people and search engines.

The <header> tag helps you organize blocks of content and adds meaning to your layout. Screen readers and assistive tools detect it more easily than plain containers.

Search engines read it to understand your content structure. It helps users read and scan faster and supports clean and reusable sections in your HTML.

Here is a quick example:

<header>
  <h1>Site Title</h1>
  <nav>...</nav>
</header>

The syntax looks like this. Use the <header> tag with an open and a close tag. Place content such as headings or images inside it.

Do not nest <header> inside the following elements:

• <footer>
• <address>
• Another <header>

The element behaves like a block element.

What is the difference between <header> and <head> tags?

The <header> tag holds visible content. The <head> tag holds metadata like the title and scripts. You place <head> once per page. You can place <header> in many sections. Do not confuse them. This can cause layout or SEO issues.

How to Use the Header in Articles or Sections

You can place <header> at the start of each <article> or <section>. It helps you give local context, like titles or links. Use this method in blogs or cards. Keep each section’s header clear and separate from the main one.

Here are the common mistakes:

• Don’t place it with no content inside.
• Don’t place it inside non-semantic elements.
• Do not nest it inside another <header>.
• Don’t use it when a plain <div> is enough.
• Do not confuse it with the <head> tag.

How to Style the <header> Tag with CSS

Style it like any block element. Use spaces with padding or margin. Use layout with flexbox or grid. Target it with the header selector or a class. Match the design with its content role.

Target the <header> directly with the header selector or assign it a class or ID for more specific styles. Always design it to match the purpose of your header, whether it’s a simple title area or a full-featured navigation section.

Example:

header {
  background: #f2f2f2;
  padding: 1rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #ddd;
}

header h1 {
  font-size: 1.5rem;
  margin: 0;
}

header nav ul {
  list-style: none;
  display: flex;
  gap: 1rem;
  margin: 0;
  padding: 0;
}

header nav a {
  text-decoration: none;
  color: #333;
}

This example creates a clean header with a title on the left and navigation links on the right. It adds padding and colors with spaces to fit your design.

Examples of <header> Tag in HTML

Basic Page Header:

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

This simple header displays a main title at the top of the page. Use it when you only need a heading without extra navigation or content.

Header with Navigation Menu:

<header>
  <h1>My Blog</h1>
  <nav>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/about">About</a></li>
      <li><a href="/contact">Contact</a></li>
    </ul>
  </nav>
</header>

This header includes a navigation menu below the site title. It helps users find the main sections easily.

Section Header Inside an Article:

<article>
  <header>
    <h2>How to Use the Header Tag</h2>
    <p>Published July 2025</p>
  </header>
  <p>The <header> tag helps structure your content...</p>
</article>

This header belongs to an article and gives local context. It groups the title and publication info together.

Header with Logo and Search:

<header>
  <div class="logo">
    <img src="logo.png" alt="Site Logo">
  </div>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
  <form>
    <input type="search" placeholder="Search...">
    <button type="submit">Go</button>
  </form>
</header>

This complex header has navigation links and a search form. It creates a fully featured site header for rich user interaction.

Wrapping up

In this article, you learned what the <header> tag does and where to place it. You saw how it compares to the <head> tag and how to avoid mistakes. You also explored its role in structure and SEO.

Here is a quick recap:

• Use <header> to group titles or navigation at the top of a page or section.
• Do not confuse <header> with <head>.
• Use it more than once in sections like <article> or <section>.
• Avoid nesting or misplacing it.
• Style it and match its semantic role.
• Use it to improve user flow and content.

<header>
  <h1>Site Title</h1>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
    </ul>
  </nav>
</header>

Similar Reads