How To Use The H1 To H6 Headings

How does the HTML heading hierarchy work?

HTML headers can be likened to choosing a pencil type when creating a sketch, in that some pencils will give you a more defined line, and others will appear much fainter on the page. 

Within HTML, headings run on a scale of H1 to H6, with H1 being the most senior tag, and H6 having the least prominence.

There is a good reason why such a variance exists, as it establishes a hierarchy within the content. Going back to the drawing example, and while you might want to create a strong outline, you wouldn’t want all the lines to be the same thickness otherwise it would be difficult to distinguish the main focus. 

H tags adopt the same mantra, in that a H1 tag contains the main heading, with subsequent H tags acting as subheaders of lesser importance, the greater the number after the H is. 

H1 Tags

Somewhere towards the top of your web page will be a H1 tag. It’s often marked as the title of the page and is usually replicated in the HTML title tag. It will be displayed on search engine results, along with a short snippet of text underneath. 

What makes a great H1 tag is a phrase that is highly searchable, such as ‘Easy recipes to cook for dinner’, or ‘Mechanics in London’ – basically, relevant search terms your users are likely to tap into Google. 

The difference between a title you’d use in print versus digitally couldn’t be felt more strongly when it comes to a H1 tag. Even though there is room for intrigue and creativity, it should still cut straight to the point. It’s therefore crucial your H1 tag uses a keyword or phrase that directly relates to the content that will follow. 

Using our mechanic example, a bad H1 tag for a blog post would be ‘Oh no, it happened again?’ – Even if the rest of the page is useful, nothing in the tag is describing the product or service. Instead, a great H1 tag would be ‘What to do when your car won’t start’. 

H2 Tags

H2 is the most used tag of all, because it’s not the title tag, yet still retains a high level of significance. It is used as a subheading, with tags H3-H6 (at SISTRIX we generally stop at H3 to avoid complexity) being used underneath in direct correlation. 

The benefit of H2 tags is that they give you plenty of room to add in more keywords, especially in the form of searchable phrases. Such phrases shouldn’t be implemented in direct competition with your H1 tag, but can allow you to rephrase it to cover all SEO bases. 

So, if your H1 tag was ‘How to make banana bread’, a great H2 would be ‘Banana bread recipe’. If you make sure your H1 tag contains the most highly searched term, your H2 can mop up the rest of the audience so you don’t miss out on either search term. 

H3 Tags

H3 tags are an excellent way to break up long sections of text within your H2 headings. As a rule of thumb, try not to exceed 300 words per heading for the best readability. So if you have a lot to say on a particular section, you can break it down into subsections using a H3 tag. 

If the H2 tag was ‘Best parks in London’, sensible H3 tags would be ‘Regent’s Park’, ‘Greenwich Park’, ‘St James’s Park’ etc. 

H4 – H6 Tags

It is rare for a web page to make use of the full H1-H6 tag spectrum. That being said, sometimes a H4 to H6 tag is required. Though, given a H4 tag should only be used under a H3 tag it would most likely be on a very long piece of content where precise subsections were required. IN this case it might be worth considering breaking up the page into multiple pages.

Best Practices For Using H Tags

A H1 tag is usually only used once at the top of the page. While you technically could add a second H1 tag further down the page, it’s not recommended especially as it could confuse those using a screen reader. 

Also, be sure to use a H tag that ranks either one place higher or lower than your previous tag. So for example, you wouldn’t use a H2 tag and then a H6 tag underneath it, instead you’d use a H3 tag. 

While H tags will alter the size of the text, they shouldn’t be used to resize text. Instead, use a manual editor or edit the CSS if you have a formatting issue. The reason for this is that H tags are supposed to highlight key pieces of information, and will be something Google crawls for. The wrong H tags could alter your page ranking, especially if non-relevant keywords are highlighted. 

To Sum Up

Understanding how to use the H1 to H6 headings will help you structure your content in a way that benefits your SEO and your users. While it’s technically possible you’ll need all 6 H headings, H1 to H3 will be the ones you use most. This involves creating a header with a H1 tag and breaking up your main body of text with H2 and H3 tags.If you get beyond H3, consider splitting the article into multiple posts.