How To Use H1-H6 HTML Elements Properly

TL:DR : Heading tags have some influence on pages when it comes to ranking in Google. If you don’t know what you are doing, or want to approach this simply, stick to one H1 on the page, and make the rest H2. Write simply and naturally with keywords in them if relevant. Avoid keyword stuffing and take note that ‘Each piece of duplication in your on-page SEO strategy is ***at best*** wasted opportunity.’ Simple handling of H tags is often more manageable than ‘optimal’ and a lot easier to achieve with most of the benefits, and there is often no exactly correct way to apply any specific SEO element in every instance.

Read on for a more detailed explanation of how I handle headings from H1 to H6 on a web page, and why I only use 1 H1 on a normal web page unless I am specifically asked to do something different, or am working with a very bespoke HTML document.

What Are Headings Tags in HTML?

In HTML (the markup that makes web pages);

The six heading elements, H1 through H6, denote section headings. Although the order and occurrence of headings is not constrained by the HTML DTD, documents should not skip levels (for example, from H1 to H3), as converting such documents to other representations is often problematic.” W3C

There are six levels of headings in HTML with H1 as the most important and H6 as the least.W3C

 

Does Google Use Heading Tags in SEO?

Yes.

We do use H tags to understand the structure of the text on a page better, John Mueller, Google

and

Google looks at a lot of different things we look at over 200 things PageRank is just one of them whenever we rank things other things we use things in the title things in the URL even you know things that are like really highlighted like h1 tags and stuff like that Matt Cutts, Google

As an SEO (search engine optimiser) and one-time website accessibility student, I have always created my pages with headings tags. I used to spam headers as a web spammer because it seemed to work. I take more care in 2017.

 

How Many Headings Should You Use? Does the Order of Heading Tags Matter?


Question: “Can the H1 Tag appear below the h2 tag in the code does the spider still know what’s going on?”
Answer: “yeah I wouldn’t worry about it we handle h1s and h2s very well but don’t make your entire page h1 or h2Matt Cutts, Google

You can use them all, or none at all. You can use as many as you want. You do not need to use all six HTML elements to structure your pages. Google ESPECIALLY is used to broken HTML on the web.

The W3C lays down more elegant recommendations:

documents should not skip levels (for example, from H1 to H3), as converting such documents to other representations is often problematic.

For example, this is semantically correct:

<h1>Website Design Basics<h1>
<p>Here is some text</p>
<h2>HTML</h2>
<p>Here is some text</p>
<h2>CSS</h2>
<p>Here is some text</p>

I always only use one H1 Element on any page. I am old school when it comes to web accessibility and SEO and I like to keep things simple so as to move onto other things that matter more.

How Many H1 Tags Can You Use On A Page for SEO Benefit?

Q & A Quote : How many h1-tags should be used on a single webpage?; Answer: As many as you want. Google

Question : “How many h1-tags should be used on a single webpage?”

Answer: “As many as you want.” John Mueller, Google

This argument seems to confuse and aggravate HTML experts, too.

Google evidently does not care that much, and it will probably attempt to ignore any attempt to manipulate it anyway.

Some argue that having more than one H1 per page is sensible in some instances (and HTML5 certainly allows for this, in some interpretations).

HOWEVER – and not getting into the actual HTML5 argument here, the W3C HTML5 Recommendation 28 October 2104 states:

“Warning! There are currently no known implementations of the outline algorithm in graphical browsers or assistive technology user agents, although the algorithm is implemented in other software such as conformance checkers. Therefore the outline algorithm cannot be relied upon to convey document structure to users. Authors are advised to use heading rank (h1-h6) to convey document structure.

and many others, one of the most succinct voice being adrianroselli.com have raised concerns:

“Unfortunately, despite all the activity in the standards world along with the lack of activity on the part of the browsers, many developers continue to be unaware that this imparts no benefits to users and even harms many of those users. …. This was part of the spec, and it was “revoked”, which is not a nice thing to do. And it was revoked not because they considered that it was a bad idea, but because of screen readers not implementing it correctly … Disregarding the fact that it was never part of the final W3C spec, that the spec had a warning for three years, that nobody considered the algorithm a bad idea, that screen readers had nothing to do with it, and that browsers not implementing it is different from correctly implementing it …. Like it or not, browsers are not moving on this feature and citing the purely theoretical document outline does nothing to move it forward. We as developers need to resolve this while still making it easy for content authors. There is a new issue opened against the W3C specification to try to understand how the outline algorithm is supposed to work so a polyfill can be created. This is sometimes a first step to getting support built into browsers. Read more at the issue, Update outline algorithm #794.”

Which is why I think sticking to simple solutions often works best. I am an SEO, not a markup artist.

Google expects variation. Google’s (rather old but still relevant) pdf on SEO indicates it expects to find and process variations of use on the web, although the examples never indicate multiple H1 uses e.g.:

Google expect variation when it comes to the use of HTML Headings

The W3C advises:

“Nest headings by their rank (or level). The most important heading has the rank 1 (<h1>), the least important heading rank 6 (<h6>). Headings with an equal or higher rank start a new section, headings with a lower rank start new subsections that are part of the higher ranked section.”

“Skipping heading ranks can be confusing and should be avoided where possible: Skipping heading ranks can be confusing and should be avoided where possible: Make sure that a <h2> is not followed directly by an <h4>, for example. It is ok to skip ranks when closing subsections, for instance, a <h2> beginning a new section, can follow an <h4> as it closes the previous section.”

It is worth noting that in their examples in their tutorial the W3C utilise only ONE instance of H1.

W3C on Headings Usage in HTML

and

Examples using 1 Headings Tag and different variations of page structure in HTML

In the end – it will depend entirely on the site you want to make and the audience it serves. I think it is important to KEEP IMPLEMENTATION CONSISTENT across your entire site to maximise usability.

Design for your user base first, and Google may well be smart enough to work out your quality. I prefer to keep it simple and give pages to Google in a simple format I know it can read and rank accordingly.

Bing, the search engine ran by Microsoft is very much more succinct in their webmaster advice:

What Is The Proper Use Of H1, H2, H3, H4, H5, H6 heading elements?

I usually aim to use the H elements as explained above, with one H1 on the page and only reach level H3 (on this site) as each page is a concise investigation of one topic.

The following is also semantically correct:

For example, here is where I live:

<h1>Earth</h1>
<h2>Europe</h2>
<h3>UK</h3>
<h4>Scotland</h4>
<h5>Renfrewshire</h5>
<h6>Greenock</h6>

Or vice versa.

You can use any number of H2, H3, H4, H5, H6 Elements on any page.

You can use any number of H2-H6 elements on any one page, but this might be a bit cumbersome for the typical web designer.

So as you can see there are multiple ways to implement these elements. I would recommend that possibly you keep your pages specific about one topic and use:

  • One H1 Element (or tag, as many call it)
  • As many as required H2 elements to denote sections on the page (you should only need one or two or 3 if you are keeping your page concise.
  • Consider using H3 Elements for useful link groups to other relevant sources but advice (2013) would be to try and keep headings for MAIN CONTENT TEXT content and not to group template navigation, for instance.

SEO Headings Elements

Correlation studies have posited that Google adds some weight to H1 elements (and other studies claim the contrary). John Meuller, from Google, did say in the above video that there is a ‘slight boost‘ to using them.

While the THEORY of a benefit is sound, and keeping in mind John’s advice that there is a ‘slight boost‘, for me there is little hard evidence that H1-H6 headings improve SEO performance in a very noticeable way (in Google). I would CERTAINLY NOT want to see a keyword phrase I am targeting appear in every Heading element.

Use <h1> for top-level heading

<h1> is the HTML element for the first level heading of a web document:

    • If the document is stand-alone, for example, ‘Everything you want to know about SEO’, the top-level heading is probably the same as the title. If it is part of a collection, for example, an introductory section on ‘SEO then and now’ in a collection of pages about ‘search engine optimisation’, then the top level heading should assume a certain amount of context; just write
<h1>SEO Then and Now</h1>
    • while the title should work in any context:
<title>Everything you want to know about SEO</title>

Everyday usage sees the Page Title Element of a page often repeated as the H1 of the page.

Unlike the title, this element can include links, emphasis and other HTML phrase elements.

Consider using CSS (Cascading Style Sheets), which are designed to express the author’s preferred font sizes corresponding to elements such as H1, etc
Remember:

“The six heading elements, H1 through H6, denote section headings. Although the order and occurrence of headings is not constrained by the HTML DTD, documents should not skip levels (for example, from H1 to H3), as converting such documents to other representations is often problematic.” W3C

Google Can Use H1,H2,H3,H4,H5 & H6 As Titles For Page Snippet

I like finding Google’s limits. I ran a quick test to see if Google will use any H Tag as a page title if for some reason it does not like the page title element you give it (as I thought it might).

The result was if the title element is malformed, Google can use any available heading, be it an H1, H2, H3 H4 H5 or H6 as the page title.

The snippet below shows Google using an H6 as the page title (in 2012)

Screen Shot 2012-04-02 at 01.56.59

Although here is that result today:

Screen Shot 2015-03-18 at 01.19.33

…Just because Google can – or could – doesn’t mean it will play ball in 2017. Things come and go and come back again, in SEO.

SEO H1-H6: How Many Keywords Can I Use?

If using multiple H1 or headings – I certainly would not be stuffing them with keywords outwith any norm.

I can’t find any definitive proof online that says you need to use Heading Tags (H1, H2, H3, H4, H5, H6) or that they improve rankings in Google, and I have seen pages do well in Google without them – but I do use them, especially the H1 tag on the page.

It is another piece of a perfect page, in the traditional sense, and I try to build a site for search engines and humans.

<h1>The Hobo SEO Company, Scotland</h1>

I still generally only use one <h1> heading tag in my keyword targeted pages – I believe this is the way some at the W3C intended it be used – and I ensure it appears at the top of a page above properly marked up < p > tags and written with my main keywords or keyword phrases incorporated

I have never experienced any problems using CSS to control the appearance of the H tags making them larger or smaller.

I use as many H2 – H6 as is necessary depending on the size of the page, but I most often use H1, H2 to H3.

How many words in the H1 Tag?

John Mueller gave us some direction on headings in this video from October 2015:

I use as many as I think is sensible – as short and snappy as possible usually. Aaron Wall at SEOBook recommends not making your h1 tags the same as your page titles.

I have never seen this as negative, per say on a properly optimised page – but he is of course crystal clear in his reasoning:

“The bottom line is using more relevant keyword variations = more traffic”.

He goes further with an excellent piece of advice even in 2017:

Each piece of duplication in your on-page SEO strategy is ***at best*** wasted opportunity. Worse yet, if you are aggressive with aligning your on page heading, your page title, and your internal + external link anchor text the page becomes more likely to get filtered out of the search results (which is quite common in some aggressive spaces).

Be sure to make your heading tags highly relevant to the content on that page and not too spammy, either.

Concentrate on making page text rich and engaging, first.

Do you get any (Google) SEO benefit from having H tags at the beginning of the body (of a web page)?

“We do use H tags to understand the structure of the text on a page better but it’s not the case that you get any magical SEO benefit from like putting all of your content in an h1 tag in the beginning and we do give it a slight boost if we see a clear heading on a page because we can understand this page is clearly about this topic but it’s not something that I’d say you absolutely need on every page to show up in search in a lot of pages don’t use H headings at all they just mark up the content with CSS” John Mueller, Google

Note – I remember one time I checked it MANY YEARS AGO Google seemed to ignore the text (in instances) above the H1 on a page. If I ever find the image, I will add it to this post. I did not duplicate this experiment, so consider this hearsay. It was enough for me to continue to place the H1 tag above the P tag (the p tag the most important tags you should be optimising in 2017).

One H1 tag on the page keeps things simple.

Further Reading


  • Site Review

    Headings are not the primary factor that Google uses to rank your website in 2017. Google is rating the quality of your website. If you are looking to get more visits to your website, I can review it and tell you exactly what you need to fix to make more money with your site.

    Find Out More