Heading Tags 101: How to use them properly (and why it matters)

Heading tags are an important part of creating content that is usable, accessible and optimized for search engines. However, I still find that people don’t know how to use them properly. 

In this article, I’m going to teach you the basics of how to properly use heading tags: what are the rules, what do they affect and what are common mistakes to avoid. 

My goal is to help you publish content that is properly formatted so your readers, search engines and screen readers can more easily hear what you have to say.

Heading tags are HTML semantic elements that are used to introduce the content that follows. They are important, foundational tools to help with accessibility, usability, SEO, readability and more. 

Heading tags provide hierarchy to your content (like a nested bulleted list—I’ll expand this shortly). There are six levels of heading tags (H1, H2, H3, H4, H5, H6) though H5 and H6 are rarely required. 

There are a lot of terms that are either similar or that serve similar purposes as headings, but in this article, we are focusing on the HTML semantic element. 

Imagine you visit a page that looks like this. 

It feels like a scientific paper, doesn’t it? What if instead it looked like this?

It’s the exact same content but now it breathes, it’s easy for you to scan and it helps make sense of what you’re about to read, which makes it easier to absorb.

As I mentioned earlier, heading tags don’t just make things pretty: they add a layer of meaning by showing relationships between sections.

One of the ways I like to illustrate this is to imagine we’re going to write a page about pets. So the outline for this page could look something like this: 

• Pets
  • Dogs
    • Golden retriever
    • French bulldog
    • Poodle
  • Cats
    • British shorthair 
    • Burmese
    • Chartreux

Within pets, we have two kinds of animals: dogs and cats. And under each animal, there are three breeds. By formatting our outline using nested bullet points, we are visually showing the structure of our content between these concepts (dogs and cats are a kind of pet, Golden retrievers, bulldogs and poodles are a kind of dog, etc.)

That’s a lot of complexity that we’re able to communicate very quickly. 

Heading tags work in the exact same way as a nested bulleted list: they communicate this hierarchy and structure. So in this page about pets, Pets will be our H1, our animals (dogs and cats) will be our H2s and the breeds under each animal will be our H3s. 

Let’s take a look at each individually.

As we can see from the image, size does kind of matter. And of course it does! It is how sighted users identify hierarchy after all. But this size doesn’t have to be consistent across your entire website. 

The H1 on your page for example might be bigger than the one on your article page. 

Now if your on-page title isn’t an H1, that is frequently an issue a developer has to fix. Similarly, if other elements outside of your page’s content are H1s (I frequently see “Subscribe to Newsletter” or even the name of the organization in the footer as an H1), you’ll need a developer’s help. 

Usually you can control the heading tags within the body of your content and there you should make sure you don’t assign additional H1s.

These are often choices that happen in design or sometimes in the way a page is developed but the first element in your page’s main content should be the page title, not an image, not breadcrumbs, not eyebrow text… 

Good web practices state that you start your page with the on-page title, which is your H1.  

This should go without saying but it does need to be said. The function of a heading tag is to describe to a user the content they’re about to consume. 

The reason heading tags help with SEO is because they provide rich opportunities for keywords that you want to rank for. So if you want your page to show up for relevant searches, searches it provides answers to, you want to use the real estate of your H1 to include the topic the page is going to be about. 

As opposed to writing a headline that is coy, vague, mysterious, or artsy.

This is the way heading tags should be used: your page starts with an H1, then the two main sections of the page are introduced with H2s.

As you add subpoints within a section, that’s when you move on to the next heading level. So in this case, the first H2 has two H3s within it, the second H2 has one. 

You rarely will need to use anything past H3. If you’re using an H5 or H6, there’s likely an issue with the structure. 

Just like your H1 should describe the content you’re covering on your page, your subheads should describe the content they’re about. 

It’s probably easiest to understand how to best use heading tags by looking at the frequent mistakes I’ve come across over the years.

Like we did with the rules, let’s take a look at these in a little more depth. 

You’re writing your blog post and you’ve got this statement that you think is going to change the world if everyone could just read it. What do you do? Make it an H1, nice and big. 

Don’t do that! A heading tag is not an aesthetic choice.

This is a bit of a variation of the first mistake. Sometimes you are using the right heading level in the right place to introduce the next section. The problem? You’re writing a paragraph. Your heading is there to quickly summarize and describe what someone is about to read. You’re removing friction – they should be able to see it at a glance and quickly process it.

Maybe you understand that an H1 goes first, then an H2…but every time you go down the page and seeing a heading, you’re assigning it the next level. Think back to the concept of nested bulleted lists: 

• Pets
  • Dogs
    • Cats 

If Pets is an H1, Dogs is an H2, Cats should not be an H3 because it’s not a subset of Dogs.

This is the most frequent mistake, and the culprit is usually (but not always) a little bit of mistake 1. 

Oftentimes, I’ll see an H1 as the on-page title, which is great, but the next heading is an H3. Usually the reason is because the publisher wants to communicate that this is a smaller section than the main subsection which they’re about to introduce with an H2. 

We also see this issue in the example above with the dreaded eyebrows. Eyebrows are mini headings above a heading and they’re a bit of a nightmare to code properly. Usually they exist so you can be extra long and verbose with your heading (see mistake 2), but still properly summarize what the content is going to be about.

Next time you’re doing a content audit, give your heading tags some love; this checklist will help:

• Does every page have one and only one H1? 
• Does every page start with the H1 tag? 
• Is the page broken up into sections introduced by heading tags to help users navigate the content more easily? 
• Are heading tags used in the proper sequence? 
• Do the heading tags help summarize the section they introduce? 
• Do the heading tags build an outline that makes sense of the content on the page?