How To Use H1-H6 HTML Elements Properly

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

However you do not need to use all six elements to structure your pages.

For example:

<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>

We use only one H1 Element on any page – and Google has recommended this in the past, although there are instances today when it could be argued that having more than one H1 per page is sensible (and HTML5 certainly allows for this). 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.

At Hobo we usually aim to use the H elements as explained above, and generally only reach level H3 as each page is a concise investigation of one topic. We only use one H1 element per page on most pages.

However 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>

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 is a few definitive ways to implement these elements. We would recommend that possibly you keep your pages specific about one topic and use

One H1 Element (tag as it is commonly talked about)

As many as required H2 elements to denote sections on the page (you should really 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 recent advice (2013) would be to try and keep headings for TEXT content and not to group template navigation, for instance.

SEO Headings Elements

It has been argued that the main search engines pay more attention to H1 elements these days, so you might want to consider this when creating your pages, and include your best keywords in it. While the THEORY is sound, there is little actual evidence that H1-H6 headings improve SEO (For Google). I would CERTAINLY NOT want to see a keyword 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 basically 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 a section on ‘Penalties’ in a collection of pages about ‘search engine optimisation’, then the top level heading should assume a certain amount of context; just write

<h1>Penalties</h1>

while the title should work in any context:

<title>Everything you want to know about SEO</title>

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 Will 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 will use any available heading, be it a H1, H2, H3 H4 H5 or H6 as the page title.

The snippet below shows Google using a H6 as the page title.

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

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. For me it’s another piece of a perfect page, in the traditional sense, and I try to build a site for Google 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 the W3C intended it be used – and ensure they appear at the top of a page 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 generally I use H1, H2 & H3. The Hobo site has underwent a massive changeover to a new more modern template – I’m still not quite happy with how I am deploying H tags, but that’s a job for another day.

How many words in the H1 Tag? 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 exact same as your page titles, although I personally have never seen a problem with this on a quality site.

As always 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.

NOTE – I resolved a few spelling errors on this page. Removed ‘headers’ where it should have been ‘headings’.

11 Responses

It’s amazing how many webmasters or so called “seo experts” still don’t know the proper use of heading tags. First, many people forget they aren’t just used to inject keywords onto your web page but rather to “structure” the content so a search engine and web visitor know what the web page is about. Good to see more blog posts aimed at the proper use of header tags.

I totally agree to your setup advice and prefer that logic, too. I don´t use or like the H1 for logo/companytitle as it is done by some templates. I have one issue, where i could not find any answer… As far as Joomla is used in the typical way (menuitems with blogviews, plus its single articles as additional menuitems), what happens to this typical blog-views… they which will list and contain many, many H1 Tags. Does it have a bad influence on my site and indexing? I know, there is an extra option in sh404, to change all H1 into H2 tags, if there are more than one… but is this really helpfull? What about the CSSstyling? It would change… Any clues?

Wow this is stunning information. Looks like what”s happened is google really doesn’t like your page title and has chosen something else. This looks like a pretty good thing to do in most cases when the title is irrelevant or perhaps gibberish.

Interesting test. Surprised you are doing it on a legit domain though. I didn’t know they would fall-back to H tags. I think that the precedence must go something like this: title h1-h6 incoming link text title tags of other sites on the server I saw a site managed by a “professional seo company” that accidently had a noindex robots.txt on it … for about 3 – 4 months. Think the site had also taken a hit for hacked links on DeviantArt, Google had decided that the title of the site was going to be something like: “LinkBanba Premium Web Directory” The same company had a site that had no title tag and all the content was loaded via AJAX, in this case Google decided to use another site on the same server’s title tag.

For good optimization you should always run the heading H1-H6 But why use H4-H6. I’ve found that there should only be one H1 but as many H2 as you like With a H3 in you footer combined with bullet points and bold text.

@Richard Ball This comment obviously depends on what your definition of a footer is. If it’s where you put all your copyrighted information such as company, vat and telephone numbers then you shouldn’t have any H(n) in there at all. If you take a look at newer languages, such as HTML5 then you will see that pages do not validate when you put have placed an H(n) in the footer element.