Glossary
HTMLCSSJavaScriptPythonSwiftTypeScriptSQLReact

HTML

HTML Header: Syntax, Usage, and Examples

In HTML, the <header> tag represents a container for introductory content or navigational links. The HTML header is often used to group a logo, heading, navigation menu, or similar elements at the top of a webpage or section.

How to Use the HTML Header Tag

The syntax for using the HTML header tag is straightforward: 

<header>
  <!-- Introductory or navigational content -->
</header>

You can place the <header> tag at the top of a document or within an individual section like <article> or <section> to give that part of the page its own header.

Here’s a common structure for a full-page header: 

<header>
  <img src="logo.png" alt="Site Logo">
  <h1>My Portfolio</h1>
  <nav>
    <a href="#about">About</a>
    <a href="#projects">Projects</a>
    <a href="#contact">Contact</a>
  </nav>
</header>

When to Use the HTML Header Tag

The <header> element is appropriate any time you want to wrap introductory content at the beginning of a section. Here are the most common scenarios:

Page-Wide Site Headers

Use the HTML header at the top of your page to display a consistent introduction. This often includes your logo, site title, and navigation links.

Section Headers

Within long articles or content-heavy pages, it’s common to use the <header> tag inside an <article> or <section>. This groups headings and metadata together. 

<article>
  <header>
    <h2>Climate Change Trends</h2>
    <p>By Sofia Nguyen, March 2025</p>
  </header>
  <p>Recent data shows...</p>
</article>

Accessibility and Semantic Structure

Using the header tag in HTML gives your page clearer structure, which helps screen readers and assistive technologies navigate your site better. It also improves SEO by making content relationships explicit.

Examples of HTML Header Usage

Let’s explore several practical uses for the <header> tag.

Example 1: Blog Post Layout 

<article>
  <header>
    <h1>The Rise of AI in Creative Fields</h1>
    <p>By Jamal Rivera | April 3, 2025</p>
  </header>
  <p>Artificial intelligence is now influencing...</p>
</article>

Here, the header for HTML wraps both the title and the byline for a blog post. This gives meaning to the grouping and lets search engines and assistive tools understand what belongs together.

Example 2: Navigation Header 

<header>
  <h1>CodeCamp</h1>
  <nav>
    <ul>
      <li><a href="/courses">Courses</a></li>
      <li><a href="/about">About</a></li>
      <li><a href="/login">Login</a></li>
    </ul>
  </nav>
</header>

In this layout, the HTML header contains a site title and a navigation bar. This type of setup is standard on most websites and often appears across all pages.

Example 3: Section-Specific Header 

<section>
  <header>
    <h2>Getting Started</h2>
    <p>Follow these steps to set up your account.</p>
  </header>
  <ol>
    <li>Create a username</li>
    <li>Confirm your email</li>
    <li>Log in and start learning</li>
  </ol>
</section>

Not every <header> tag needs to be global. In this example, it's used within a <section> to introduce a specific group of content.

Learn More About the HTML Header Tag

Multiple Header Tags on a Page

Unlike <h1>, which typically appears only once per page, you can use the <header> tag multiple times in a document. Each instance can serve as the header for its parent section.

This is valid: 

<body>
  <header>
    <!-- Main site header -->
  </header>

  <section>
    <header>
      <h2>About Us</h2>
      <p>Our mission and values.</p>
    </header>
    <p>We started in 2010...</p>
  </section>
</body>

Each header is scoped to its containing section, helping organize your content semantically.

Difference Between <header> and <head>

Beginners often confuse the <header> and <head> tags. The <head> tag contains metadata like the page title, character encoding, and links to stylesheets or scripts. It’s not visible on the page.

The <header> tag, on the other hand, contains content visible to users and appears as part of the body: 

<!-- This is metadata, not for display -->
<head>
  <title>My Website</title>
</head>

<!-- This is visible content -->
<body>
  <header>
    <h1>Welcome to My Website</h1>
  </header>
</body>

Understanding this difference is important for structuring HTML correctly.

Nesting Other Elements Inside <header>

The header tag in HTML can contain any content that's considered introductory. Common elements inside a <header> include:

  • Headings (<h1>–<h6>)
  • Navigation links (<nav>)
  • Paragraphs (<p>)
  • Images (<img>)
  • Lists (<ul>, <ol>)

However, it shouldn’t include content that’s not introductory. Avoid putting main paragraphs, tables, or forms inside a <header> unless they’re part of the intro.

Styling HTML Headers with CSS

To make your headers stand out, CSS is your friend. Here’s a quick example: 

<style>
  header {
    background-color: #f5f5f5;
    padding: 20px;
    border-bottom: 2px solid #ccc;
  }

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

  header nav a {
    margin-right: 15px;
    text-decoration: none;
    color: #333;
  }
</style>

You can apply custom styles to each <header> on your site or target specific ones with classes. 

<header class="main-header">
  <!-- Unique styles for the main header -->
</header>

HTML5 Sectioning and Document Outlines

The introduction of HTML5 made it easier to organize your documents using semantic elements like <header>, <nav>, <article>, and <footer>. When combined properly, these elements help browsers and assistive tools form a document outline.

Example: 

<body>
  <header>
    <h1>ShopMate</h1>
  </header>

  <main>
    <section>
      <header>
        <h2>Trending Products</h2>
      </header>
      <!-- Products here -->
    </section>

    <article>
      <header>
        <h2>Latest News</h2>
        <p>Updated: June 30, 2025</p>
      </header>
      <p>We’ve launched a new affiliate program...</p>
    </article>
  </main>

  <footer>
    &copy; 2025 ShopMate
  </footer>
</body>

This structure makes your code cleaner and improves your site's accessibility and SEO.

SEO and the <header> Element

The header for HTML plays a role in how search engines understand your site. While it doesn't directly improve rankings, using it properly makes your content easier to crawl and index. Google appreciates well-structured markup with clear sections and logical grouping of headers and navigation.

For instance, placing your navigation inside the header helps search engines discover and prioritize those internal links.

Avoiding Overuse or Misuse

Don’t wrap everything in a header. Use it only where it semantically makes sense. For example, don’t do this: 

<header>
  <p>This is the entire website</p>
  <p>And here's all the content</p>
</header>

The <header> should never contain your site’s entire body content. Keep it limited to introductory content only.

Summary

The HTML header tag is a versatile and meaningful element for grouping introductory content at the start of pages or sections. Whether you're building a homepage with navigation or structuring a blog post, using <header> helps organize your HTML semantically, supports accessibility, and lays the groundwork for better SEO.

To recap:

  • Use <header> to contain headings, nav menus, and brief introductory info.
  • It can be used globally or locally within articles and sections.
  • It should not be confused with the <head> tag, which holds page metadata.
  • Structuring pages with semantic elements like <header> improves readability—for both people and machines.

Once you understand where and how to use the HTML header tag, your pages become cleaner, more maintainable, and easier to navigate.

Learn HTML for Free
Start learning now
button icon
To advance beyond this tutorial and learn HTML by doing, try the interactive experience of Mimo. Whether you're starting from scratch or brushing up your coding skills, Mimo helps you take your coding journey above and beyond.

Sign up or download Mimo from the App Store or Google Play to enhance your programming skills and prepare for a career in tech.

You can code, too.

Company

Careers

Blog

Jobs

Product

Glossary

Code Compilers

Terms of Use

Privacy Policy

Useful

Press Kit

Imprint

Help

Follow us

© 2025 Mimo GmbH

Reach your coding goals faster

Get started