The role of H tags in HTML5 documents and their practical application

With over 861,000,000 websites on the internet (as of January 2014) it’s easy to see that not all these websites use HTML5, it’s also easy to see how search engines will take this into consideration when looking at ranking.

More over search engines like Google will often weight websites with great content over their technical mark-up prowess.

The H tags are one example where a move from HTML4 to HTML5 has caused much confusion in the web design community.

Simply put in a HTML4 page there can only be one H1 tag (the heading for the page), with the new specification (HTML5) this restriction has been lifted allowing the idea of a H1 tag in each semantic area of the page. (header, main , article, footer, aside etc..)

So what’s the issue?

With many designers looking to increase SERPS (position in search rankings) via the use of optimising their use of H tags it’s easy for an HTML5 page to become overloaded with H1 tags.

This comes down to a misunderstanding about H tags and how search engines rank web pages..

So how do H tags actually work?

Simply put an H tag is a heading and when we use a H1 tag we are saying this heading is more important than an H2 heading. (H2 is more important than H3 etc…)

This means by having a H1 tag inside all HTML5 elements, we are actually saying to search engines like Google, each of our element headers are equally important.

Is this the end of it?

Even though each HTML5 element may have a H1 tag it does not mean a search engine will take the H1 in the Footer as having the same weight as a H1 in the main, but with layouts where content is skewed for design reasons outside the normal body text areas, we can’t assume search engine will evaluate in the way we want.

In addition any search engine not supporting HTML5 may see multiple H1 tags as wrong and ignore or markdown any instances other than the first one.

So is there a better way?

As H tags are considered relative to each other (H1 is more important than H2 etc…) then when we construct a page why not still use a single H1 across the entire mark-up to describe the most important heading, H2 for the next etc…

Using this method we help non HTML5 and HTML5 search engines understand our content and make it easier for search engines to ranks our pages appropriately.

With comparative SEO often web designers will compare H tags like for like, this of course is wrong, you need to take into account where the H tags appear in the mark-up in relation to each other and consider how a search engine will evaluate the HTML 5 code.

Or in plain English, look at your mark-up, place the H1 at the head of the area you consider to have the most important content on the page, H2 as the header for the next most important and so on.

For most designs there is no need to go beyond H2, as you will be looking to highlight the main content area, but for pages where you need more control, you have access to H3 to H6.

By not using these tags when you need them, you may find that search engines like Google do not phrase your pages correctly and depress your SERP’s.

Using this method means your web page will be optimised for all search engines not just ones which support HTML5.