When to use a HTML header tag?

Have you ever wanted to fully understand HTML at a deeper level than you currently do? Recently, I asked myself this same question and it sent me on a journey, a journey to master HTML. This is part of a series to do just that.

Let's get started with the <Header /> tag.

What is the header tag?

The header tag is part of a group of html elements called Semantic tags, which means a tag that explains what something is. This is important because Semantic tags are picked up by screen readers and SEO web crawlers. It helps explain the context of the content within the document.

Where to use?

This might sound silly — and obvious, but there is a couple of unknown places I had never thought to use a header tag. Because believe it or not a header tag is a container tag made to be used for both introductory content and navigation links.

Let's start with the most common use case, that being navigation links.

<header>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>

Cool, simple enough — it makes sense. But now we're going to move into the next use case and that being introductory content.

Firstly, there is two places where you'll find what's considered introductory content. The <Section> and <Article> tags.

<article>
    <header>
      <h2>Understanding Climate Change</h2>
      <p>Key insights from recent scientific studies.</p>
    </header>
    <p>Content of the article goes here...</p>
</article>

<section>
    <header>
      <h2>Understanding Climate Change</h2>
      <p>Key insights from recent scientific studies.</p>
    </header>
    <p>Content of the section goes here...</p>
</section>

These examples show a great example of introductory content, but keep in mind the header is a container. So if you only have one child component inside it's better to not have a header tag.

<section>
    <h2>Understanding Climate Change</h2>
    <p>Content of the section goes here...</p>
</section>

Where not to use?

Now you know where to use, let's look into the places and ways you should not be using the tag:

• Not used just to style a box it's semantic not purely decorative use a <div> or <span> instead.
• Don't nest a header for no reason, it should purely be used to describe the content of the nearest <Section> or <article>.

Take away

It's as simple as that, your now an expert in the <header /> tag. You now to use it for the header that wraps the navigation or to introduce content inside a section or article tag.

I hope you enjoyed and continue to follow along on the series by subscribing to my blog. Thanks for reading.