$2,000 Free Audit

Get A Proposal

Header Tags: What They Are and How to Use Them For SEO

Jon Bennion

Jon Bennion | April 20, 2021 |

30 min read

Header tags are a technical SEO ranking factor that also has a big impact on user experience. 

You probably already know that when it comes to SEO, you need to write for people first and Google second. If you didn’t know that, take note. It’s important!

 But how do you make the most of your HTML header tags to help you with your rankings in the search engines and also make your content easy to scan, read and consume.

That’s exactly what I’m going to tell you in this article. Specifically, I’m going to explain:

  • What header tags are and the difference between h1 to h6 tags

  • Why you need to use header tags for SEO and user experience

  • Header tag best practices

  • How to add header tags in HTML to boost your technical SEO

  • How to verify your headings and header tags

Whether you are new to blogging or you’re looking for a simple way to improve your on page SEO to grow your search engine rankings, this article will give you the practical know-how to incorporate HTML header tags the right way. By the end, you will have the confidence to write and structure your content to rank. So, let’s get into it. 

What is a header tag?

There are six different HTML header tags you can use on a page. 

  • H1 - this is the most important tag on a page. In most cases, this header is the title of the page.

  • H2 to H6 - these header tags are for subheaders on a page. H2 will be used most often, and the other tags from H3 to H6 will be used depending on how you are structuring and breaking down the content.

Where H1 tags are the most important header tags on a page, H6 are the least important tags. Every page should have an H1 tag but most pages won’t use H6 tags at all. The formatting of the various header tags also reflects this. The H1 tags are generally formatted to be the largest font on the page, while the H6 headings are the smallest, as you can see in the image below.

 

Image source: Data Flair

There is a hierarchy to how HTML header tags are used on a page. I’ll cover more on best practice use of header tags later in this article, but for now, know that each page should only have one H1 header, which should appear at the top of the page, but can have multiple H2 to H6 headers.

Image source: Link-Assistant.com

While it may look to the reader like the text is just larger and bolded, when added to the page correctly, a header tag actually contains HTML markup to indicate to the search engines that the heading is important. 

Without getting too technical at this stage, you need to know that HTML stands for Hypertext Markup Language. This is the coding language used by most websites to create pages. 

Tags are essentially snippets of code that tell the web browser how to read and display the content. Header tags aren’t the only type of HTML tags. The table below shows some other common tags you might use.

Image source: html.com

The HTML tags for headers are:

  • Header 1 <h1>
  • Header 2 <h2>
  • Header 3 <h3>
  • Header 4 <h4>
  • Header 5 <h5>
  • Header 6 <h6>

Why do you need to use headings? 

If you’re wondering whether you need to use headings at all, the answer is... absolutely, yes! 

There are three key reasons why.

The first reason is to help with your SEO rankings.

Each page you write should have a primary keyword, or most likely a keyword phrase. You might also have some secondary keywords that you are targeting within the page. One of the ways you should be using those keywords on the page is within your header tags.

For example, if the keyword you are targeting is “dog food for older dogs”, you might use the H1 tag “The best dog food for older dogs”. 

This tells the search engines exactly what the page is about - dog food for older dogs, or more specifically, the best dog food for older dogs. 

As you move down the page, you might have subheadings such as, “dog food recipe for older dogs” or “what to look for in dog food for older dogs”. The more relevant the various headings, and the content underneath each heading, are to the primary keyword phrase, the better chance you have of ranking in the search engine results.

By using these keywords in your header tags, Google has a better idea of what your content is about and can send the right people to your page. Whether you are trying to sell dog food or you run a blog about dogs, what you are trying to do is capture website visitors with search intent that matches your content. 

The second reason why you need to use headers is related to both SEO and the on page user experience.

If you visit a web page that is one long page of text, only broken up into paragraphs, it is very difficult to read. The way people consume a piece of web content is by scanning. They want to capture the important information quickly and then dive into the areas that are most important or relevant to them.

In fact, you might find that some readers will only ever scan the headings on a page.

Headings are important because they help to break up the text and give the page structure.

This is an example of how you can break up a large topic into various sections and use header tags to give that page structure. 

Image source: Lipman Hearne

From a user perspective, this makes the content highly scannable. The information is organized in a clear hierarchy and that hierarchy is supported by clear headings. 

But it’s not just users who benefit from well-organized content. Google loves it too. 

When Google and the other search engines can easily scan your content and quickly understand what the page is about, you have a better chance of ranking.

Also, if someone landed on your page and there were no headings, there is a very high likelihood that they will bounce off immediately. A high bounce rate is something that Google definitely pays attention to. This tells Google that users aren’t finding what they need when they land on your site. Adding some header tags can help to reduce your bounce rate and increase your search engine rankings.

For users who are using screen readers due to visual impairment, headers also help them to “read” the content. The screen reader will technology looks at the HTML structure of the page to help the user navigate around the page. The structure and hierarchy of the page are crucial for this. 

Finally, header tags can also help to optimize the page for featured snippets, such as the one below.

Image source: Search Engine Land

The featured snippet appears at the top of the search results. In order to score a featured snippet, you already need to be ranking on the first page of the Google search results. 

Then, you need to optimize your HTML code, by using header tags so Google knows exactly what the page is about. For example, rather than listing out points in a bullet list, you might instead, wrap items in an H2 or H3 tag.

Best practices for using header tags

Knowing why to use header tags is only half the picture. You also need to know how to use them.

Let’s start with the H1 tag. I’ve already told you that it’s the most important header tag on the page. 

  • Here are some points to remember when writing your H1 headers.

  • Use only one H1 tag per page.

  • Include your primary keyword or keyword phrase in your H1 header.

  • Ensure the H1 heading is directly related to the content and written in plain English.

  • Be unique to the page (i.e. don’t repeat the same H1 tags across multiple pages on your website).

  • Although length doesn’t carry the weight it once did, aim for your H1 header to be between 20-70 characters long.

  • Visually your H1 heading should stand out on the page with strong style elements and formatting.

The most important thing you need to do with your H1 tag is to answer the user intent. When a user lands on the page, they should be able to quickly ascertain whether the page is what they are looking for by looking at the H1 header. It needs to be captivating and enticing but also crystal clear. Whimsical headlines work in print media, but when you are writing headers for digital, direct and clear is the aim.

The below image is a great example of a strong H1 header. The heading, “How to run effective meetings, and thrive”, is visually strong. The header clearly explains what the user can expect from the blog and it contains a good keyword phrase.

Image source: Atlassian

For header tags from h2 to h6, similar best practices apply.

The headers should be relevant to the content and they should be interesting and enticing. Ideally, they should also contain keywords, as long as it is natural to do so. Keyword stuffing is never a good thing!

  • However, there are also a few different best practices you should follow for your H2 and subsequent header tags. 

  • While you should only have one H1 header tag, you can have multiple H2 to H6 subheaders. 

  • You will use H2 headers most commonly, usually every 200-500 words to introduce different sections. You might also use a few H3 headers as subsections underneath an H2 header. Rarely will you use H4 to H6 headers unless your content is particularly long.

  • Avoid skipping header tag levels, i.e. your first subheading should be an H2, not an H3.

Using the same example as above, you can see they have used H2 and other lower-level header tags to break up the text. The headers help to break up the content visually and create a structure that makes the article scannable and easy to read. 

Image source: Atlassian

How to add header tags in HTML 

Adding header tags is actually quite simple and doesn’t require complex coding knowledge. But the way you add the tag will depend on if you are using HTML4 (or older) or HTML5. HTML5 is the latest, modern version of HTML, while HTML4 is classic HTML.

To add header tags in classic HTML, you would add your heading text between two tags. For example, for a H1 heading, you would add the text between <h1> and </h1>. For a H2 heading, the tags you use are <h2> and </h2>.

Image source: Quora

If you are using HTML5, the process is very similar but you need to add another piece of code before and after the tags. So for a H1 tag, the tags become <header> <h1> and </h1> </header>.

In the case of the article on the best dog food for older dogs, in HTML5 your header tags would be written as:

<header> <h1> The Best Dog Food for Older Dogs </h1> </header>

It really is quite simple to add HTML header tags to your content. But if your website is in WordPress, it can be even easier. In the toolbar, you will find various heading options to make it basically foolproof to add your header tags. 

Image source: ThemeIsle

How to verify your headings 

Now you understand why header tags are so important, how to use them within your content and the specifics of how to add them to your HTML code. But it’s also important that you check they are actually formatted correctly or all your hard work in selecting the right headings could all be for nothing.

There are a number of ways you can verify your headings. The first is by using your browser when viewing the live page. 

If you are using Google Chrome, right-click on an element - i.e. a heading - on the page and click on “Inspect”. You will then be able to view the HTML and CSS for the heading. Check that the appropriate tag, e.g. <h1> appears around the heading. 

In Google Chrome you can also view the source code of a page. Right-click anywhere on the page and then click on “View Page Source”. This will bring up all the code for the page. Once again you are looking for the same header tags, e.g. <h1>.

If you are using Safari as your browser, the process is very similar. To inspect the element in Safari, you right-click on the element/header and then click on “Inspect Element”, To view the source code you can right-click on the page and then click on “Show Page Source”.

No matter which browser you are using, you are looking for exactly the same thing. 

There is also a very simple way to verify your header tags within WordPress. 

If you are using the Classic Editor, the default view is the Visual view. To view the code you need to click on "Text", as in the image below. This will bring up the HTML code so you can check the header tags before you publish the page or post.

Image source: WP Beginner

If you are using the Gutenberg or Block Editor, you can also view the code. To do this, click on the three-dotted menu and select Code Editor.

Image source: Pair

It’s also a good idea to look at the page in preview or once it is published to ensure that the structure and flow are as you planned them to be. Remember that it’s not just the HTML markup that is important, it’s also the user experience on the page. If you put SEO before user experience, you will never get the SEO results you are looking for. 

Skyrocket your SEO today 

Optimizing your header tags can have an incredible impact on your SEO. As long as you do it the right way. 

That’s where we can help. We offer a free SEO audit to help you get your SEO on the right track and skyrocket your results. Through the audit process, we’ll look at your header tags and so much more to identify your SEO strengths and opportunities for improvements. We’ll also give you a roadmap to drive results. This is the exact roadmap we would use to deliver serious SEO gains for your website.

New Call-to-action

Let's increase
your sales.
100% transparency, no excuses, and no dodgy practices. Just serious digital results.