How to Use HTML Heading Tags Correctly

Posted on June 25, 2020 by in WordPress | 14 comments

How to Use HTML Heading Tags Correctly

Every website is its own unique monster, with developers and designers putting their own signature voices into the code. But one element that every single website has in common is HTML heading tags. Not only do these headings break up your content into more readable sections, they create the semantic outline of your site so that search engines and accessibility software can tell exactly what content makes up the site. There is occasionally some confusion as to the proper use and function of HTML heading tags, so we want to go through all 6 tiers and discuss how and when to use them correctly.

Subscribe To Our Youtube Channel

Why Use HTML Heading Tags?

Like we said above, these tags create the skeleton of your site. Without them, not only is the title and purpose of your site less-than-clear, but the content looks to users and to bots as though it were one giant wall of text — even if you break it up using paragraphs.

Plus, screen readers and accessibility software use them to navigate your content (sometimes literally). So if you aren’t including HTML heading tags, your site becomes inaccessible to many people because they simply can’t move around the page and content.

Additionally, search engines and other web crawlers that make it to your site navigate via your headings, too. Recently, Google has been considering code semantics in its rankings, meaning that search intent is weighed very heavily. Your HTML heading tags are a major part of this, telling Google and visitors where on the page to find specific information, organized by hierarchical importance.

And each tag within your page helps all of this in its own way.

Tag Hierarchy is Important

HTML heading tag heirarchy matters. The order in which you use these tags can make or break SEO for your site. While you can style them using CSS and make an H6 tag bigger, bolder, and brighter than an H2, you should still try to keep them in order so as not to confuse the crawlers (and readers).

Think about the tags in ascending order as though they are the headings for the outline of your post. You should only (in general), put a higher number under its immediate predecessor. You can nest them as many deep as you want, but make sure you only put the next one in sequence each time.

Here’s an example:

<h1>Title</h1>
    <h2>Main Point Number 1</h2>
        <h3>Subtopic</h3>
            <h4>Very specific point</h4>
        <h3>Main Point Number 2</h3>
            <h4>Subtopic</h4>
                <h5>Example or important chart</h5>
            <h4>Specific point</h4>
                <h5>Example or important chart</h5>
                    <h6>Highly specific example explaining this point</h6>

There might be specific cases where you have a single H6 above an H4, but for the most part, Google and other search engines determine topic priority and gauge content effectiveness to search intent by using headings to navigate your content.

H1 Tags

The H1 tag may be the simplest of the HTML heading tags, while also being one of the most misunderstood. In most cases, you will see the H1 heading as the title of a particular page or post. It’s what search engines will (probably) display in results. Your browser will also likely show this in its title bar, though many SEO plugins and similar apps let you change it for those. Because of that, while it’s important to have your target keyphrase in the H1 tag, it’s not 100% necessary. Write your headlines and titles semantically to cover visitors’ search intent instead of keyword stuffing the HTML heading tags.

h1 example

The image above shows an H1 tag used as the entry title for an article on the Elegant Themes blog. It is the only H1 tag on the page, too. This indicates it is the topic of the content on the page.

For years, standard practice was to have one (and only one) H1 tag per page. For the most part, this is still good advice. Google and other search engines crawl your page and seek out the H1 tag. They then use it to determine the topic, title, and structure.

However, Google has said explicitly that having multiple H1 HTML heading tags on your site incurs no SEO penalty whatsoever. That doesn’t mean go nuts using them everywhere on your site, but what it does mean is that you can use more than one per page when the need arises.

When to Use Multiple H1 Headings

The sole purpose of an H1 is to indicate a full section on a single topic. That means that if you have a single page that has more than one topic, you would want to use an H1 for each new topic on that page. Doing so would tell Google that your page isn’t just about the topic in the title. But there might also be a section on a completely different (yet related) topic lower down.

On single-page websites, this is also important because you might have an About, Pricing, Contact, and Portfolio section on that one page. So how do you let Google know that the content contained within each section is its own autonomous unit?

H1 tags, that’s how. You treat each section as though it were its own mini-webpage, using the hierarchy we discussed above in each. That way, Google sees the headings as it navigates across the page, and it can then determine which of those sections to pull featured snippets from (and so on) to answer searchers’ questions.

You may also choose to use an H1 tag each time you use a section tag on your site, but we suggest only doing that when it’s a section of parallel importance to the page’s title, rather than a subordinate one.

H2 Tags

H2 tags, now, are going to most likely be the most used HTML heading tag on your pages. And for good reason. Most posts and pages on the internet consist of a single topic with only a few subheadings. We recommend that every piece of content you create contain at least one H2 tag. Yoast and other SEO plugins suggest a heading roughly every 300 words. Depending on your content, that’s what H2 tags are for.

They separate out subtopics (or steps) for ease of reading. For example, most of our posts primarily consist of H2 headings (with H3 when applicable). That’s because our articles are on a single topic, where we’re trying to solve a single problem. We will have the title such as How to Use OBS Studio to Livestream as H1, but the subheadings like “How to Get Started with OBS Studio” will be in H2.

example of h2

The H2 tag represents individual steps that pertain directly to the H1 topic. In that particular post we used the following structure:

<h1>How to Use OBS Studio to Livestream</h1>
    <h2>What is OBS Studio?</h2>
        <h3>What about SLOBS?</h3>
    <h2>How to Get Started with OBS Studio</h2>
    <h2>OBS Studio Setup</h2>
        <h3>Setting Up a Scene in OBS Studio</h3>
        <h3>Adding Sources in OBS Studio</h3>
    <h2>Adjusting Sources Onscreen</h2>
        <h3>RMTP Keys and OBS Studio</h3>
    <h2>Wrapping Up</h2>

The H2 heading tags in this post go over the main ideas, such as getting started and downloading it, setting up the actual software, and then adjusting how your screen appears to viewers. While there are steps involved beneath those in H3, too, the H2 headings indicate the large-scale picture of the article. They’re a high-level view that crawlers and readers will be able to scan over to see if the article contains the information they are searching for.

In general, you will have multiple H2 tags per article, while you might have no subheadings nested under them. If your page or post is on a single topic that isn’t broken down into sections with subsections like the example above, it would be better to have multiple H2 tags than nested H2 -> H3 -> H4 because those indicate to crawlers you’re diving deeper on a suptopic than expanding on the post’s primary subject.

H3 Tags

H3 tags, on the other hand, are where your articles can really dig into the details of your topic. You should never use these H3 tags directly under an H1. Googlebots and search engines see them absolutely as subheadings. Whereas H2 is accepted as being a primary heading for sections within a single article (with the H1 declaring the main topic as title, remember).

h3 example

If you look closely at the image above, you will see that the actual styling and sizing between our H2 and H3 tags aren’t terribly different. Reason being, we don’t want you to assume by scanning that any point we make in an H3 is less important than an H2. Because it’s not.

It’s only smaller in size to indicate that it’s a subordinate point to the H2, rather than a direct tie to the overall topic, which is most important from a structural standpoint regarding the SEO for your article. For human readers, rather than robots, the visual distinction simply helps move them down the page and break the information down to parse more easily.

H4, H5, H6 Tags

We’ve lumped these together for a reason. In general, you will be hard pressed to find any sites that make full use of the H1 to H6 range of HTML heading tags. By far, the most popular structure is H1 to H3. Just like you rarely see a content outline to beyond the second nested level.

I. Idea 
    A. Subpoint
        1. Detail
II. Idea
	A. Subpoint
		1. Detail
III. Idea

H4

For the most part, the H4 tag will serve the same purpose as H3. You will use them to go into detail for steps and examples, but always nested below your main headings. Designers generally style them with CSS smaller than H3. They tend to see limited use in ordinary content creation. A topic tends to be very in-depth if the ideas need to be broken down so that an H4 heading tag is needed.

H5 and H6

You can use H5 and H6 headings, in a couple of different ways.

The First Way

(Just for an example, we’ve broken this particular section into various parts via heading, and we are now under H4 because it’s a sub-subtopic of the main article.)

These headings are often used in tables of contents and similar lists, though their main function is technically the same as the others, delineating topics of descending importance throughout the page. It will be pretty rare to find a document with a full array of headings down to H6.

The Second Way

Some people use H5 and H6 tags as “specialty” formatting headings. They will apply special CSS to these two HTML heading tags that is completely different from H1 to H4. You can then use them to call attention to topics and ideas that might otherwise get overlooked.

This isn’t technically best practice, as headings are hierarchical. However, if your site is structured well overall and you use H5 and H6 sparingly as specialty styles on certain individual pages or posts, you will almost certainly take no SEO hit.

Just remember that even when you’re using them for special formatting, you don’t break out of the hierarchy. Keep them in order. So if you use H6 to style a subheading, make sure the next one you use is an H1 or H2 to show you’ve moved back to the standard structure.

What Not to Do with HTML Heading Tags

Do not structure a single page with the entire hierarchy of headings all the way down. You are better off with an H1 for a title and all H2s, rather than each successive heading being nested.

Yes:

<h1>Title</h1>
    <h2>Main Point Number 1</h2>
    <h2>Main Point Number 2</h2>
    <h2>Main Point Number 3</h2>
    <h2>Main Point Number 4</h2>

No:

<h1>Title</h1>
    <h2>Point Number 2</h2>
    <h3>Point Number 3</h3>
    <h4>Point Number 4</h4>
    <h5>Point Number 5</h5>
    <h6>Point Number 6</h6>

Additionally, you don’t want to use the headings haphazardly. Only use them in order. Otherwise crawlers will have no idea how to navigate your page, nor will accessibility software.

No:

<h1>Title</h1>
    <h3>Point Number 2</h3>
    <h2>Point Number 3</h2>
    <h6>Point Number 4</h6>
    <h5>Point Number 5</h5>
    <h4>Point Number 6</h4>

In general, you can assume a crawler will know that you’ve moved out of a subsection when it finds the next H1 or H2. In the above code snippet, the crawlers and bots would have a hard time parsing the structure of information.

Wrapping Up with HTML Heading Tags

And see? We’re back to an H2 heading to wrap things up. Heading tags are an important element of every single website out there. Using them properly can increase your search engine rankings, as well as the UX of your site since visitors will be able to more easily find the information they’re seeking in your content. Remember to be sure not to keyword stuff too many of your headings. Although it is a good idea to include the keywords or phrases you’re discussing to make sure your ideas are clear, Googlebots and others are pretty smart and can tell when you’ve swapped topics or are on the same one. Overall, using HTML heading tags is incredibly important, but if you keep just a few things in mind, your sites will shine in no time.

Have you been using HTML heading tags correctly?

Article featured image by VectorV / shutterstock.com

Premade Layouts

Check Out These Related Posts

5 of the Best WordPress Donation Plugins

5 of the Best WordPress Donation Plugins

Posted on July 10, 2020 by in WordPress

There are many ways to earn money from your website. You can sell products, services, and enable paid subscriptions. However, you may even want to ask for donations, especially if you’re a non-profit (or on open-source developer). In this article, we’ll introduce you to the five best...

View Full Post

14 Comments

  1. That is very useful article, i always get confused o. those tags because of the sizing and everything.

  2. Very enlightening… I want to use h tags but i cannot style font or size.. are their size and font default?

    • You should be able to style them via the Theme Customizer, and if that doesn’t work for you, the base CSS selectors are h1, h2, h3, h4, h5, and h6. You can have something like h1.entry-title to target the titles of blog posts, for instance.

      Yanking the code off one of my personal sites, this is how I’ve styled my headers just very basically:

      h2 {
      margin-top: 30px;
      margin-bottom: 15px;
      }

      h2, h3, h4 {
      font-weight: 400;
      }

      h2, h3, h4, h5, h6 {font-variant: small-caps;}

      h2, h3, h4 {
      font-family: "Coda", sans-serif;
      }

      h3 {
      margin-top:15px;
      margin-bottom:15px;
      }

      h1.entry-title, p.post-meta {color: white!important;}

      It’s very ugly code since I did it a long, long time ago, but it should give you an idea of how you can target them with CSS.

  3. Hi B.J.,
    thank you for your allways great and informative way of explaining the wide world of websites. Again a good piece!
    May question:
    What about the “title” of a page or a post in wordpress. I allways thought that WP is tagging this title automatically as H1.
    As we know on a WP-page( -post) we can have the title-shown to be “disabled”. … So what to do then? How to start a text, how to tagg the heading?

    • Hey, Lukas!

      WordPress does automatically display the title of the page as an H1. So you don’t have to worry about it there. Just start the next down the page as H2, and you’re good.

      If you have it disabled or display:none;, what I have done is use the Divi Post Title module. I haven’t checked for sure, but I think that even with that disabled you should still have a title < /title > section on your site that search engines will see. The primary thing is that the page has a title displayed in such a way that search engines can determine what the content is about. That’s a good question — I’m not 100% sure about it.

  4. Hi very useful info.
    Is there way to change the text color inside border in html without using css style?

    • You can use the inline styling like [p style="color:#fff;]Text would be a color here[/p] (except flags instead of square brackets because of the way our comments render).

      You should also be able to set it using the visual editor in Divi, Gutenberg, or WordPress itself. I actually do this a lot with Divi, just highlighting the text in a Text Module and changing the text color via the rich editor.

  5. The possibility of changing heading tags in Divi modules would be a nice feature 🙂

  6. Very clear article, thanks!
    One question though, when I run a “heading checker” (add on) on this blog post, I notice that the purple ‘top bar’ (the CTA ‘Divi changes everything…’) is a H6, are crawlers okay with that? Or are these CTA’s above the menu-bar not taken into account and do crawlers only start ‘crawling’ from H1?
    Also noticed that the “by Jason…” is a H5 directly under a H2, should that be either a H3 or maybe make it ‘paragraph’? Just wondering and trying to learn how to best approach all the header tags in Divi (i.e Divi uses H4 for blurb titles, so I sometimes change them to keep my header order correct).

  7. Where are you getting the example code from?
    I really want to understand how to use this information on my site, but first I need to know where to look for the H1-H6 tags within Divi.

  8. Hi BJ,
    You are absolutely right that using HTML heading tags is incredibly important, and using them correctly is even more important.

    This article really helped me clear things out!

  9. Crisp and Clear Article! I started my website even after 3 years I was confused some times. Now I totally confident that how to use HTML heading tags. Thank you very much.

Leave A Reply

Comments are reviewed and must adhere to our comments policy.

Join To Download Today

Pin It on Pinterest