Share via:

How You Should Use Headings in HTML

An in-dept look at the use of headings (h1-h6) and sections in HTML pages.

567 views
d

By. Jacob

Edited: 2017-12-29 13:22

A often debated topic in SEO and HTML has to do with how headings should be used in pages. Some prefer that you only have a single h1, and others say it does not matter. Reality is somewhere between those extremes.

There is nothing preventing you from having multiple h1s in a page, and indeed there are circumstances where it makes sense to have more than a single top heading. If you want to correctly communicate the relationship of sections in a page, then it will often make sense to have at least a few h1s. The theory behind this might be a bit complex, but if you take the time to read this article, you will start to understand things on a more theoretical level.

The most obvious thing to do, would be to give your main article an h1 as a heading. If your page then contains other sections, separate from that main content, it would make sense to use h1 as the heading. For example, you do not want your navigation as a subsection to the article content. To avoid that situation, you may use h1 for your nav element (given that it has a heading).

Here is Google's official answer from December 2017:

Headings and Sections

When creating semantic structure in HTML pages, we must use headings correctly. That is, we normally should not skip heading numbers. This means, before we use h3, we should have used h2 somewhere.

Nevertheless, incorrect use of headings will, in some cases, lead to issues with search engines, as well as accessibility problems for people using assistive technology (AT). Matt Cutts, in one of his old webmaster videos from 2009, used an extreme example to illustrate the problem. Basically he said ...if your entire page is h1... – and that still holds today. Do not make everything h1!

In another video from 2011 he answered the same question, and he basically cut it down to I like one, right?. This was an overly simple answer, and not in line with his previous answer. Perhaps he was trying to avoid a long, complex, explanation to something that essentially does not matter. Apparently this was the first Live Q&A video from May 25 2011, and does not appear to exist anymore on the official webmasters youtube channel. The video is still referenced by

Regardless, John Mueller answered this question again in April 2017 on Twitter, in response to a question by Mathias Sauermann:

Hello @JohnMu, regarding the use of heading tags: How many h1-tags should be used on a single webpage? Only one? #seo

Tweet

Again, it came up as recent as December 2017, basically restating previous answers.

So, having multiple h1s is not a problem – and is in fact preferred under some circumstances. Just avoid using heading elements for what they are not intended. They should only be used for headings. Not normal text paragraphs.

If some SEOs or web- designers/developers are saying anything else, they may want to read up on the HTML standard.

HTML5 sections and h1

For some time now, we have been told to exclusively to use sections+h1 in HTML5. In theory the heading number used does not matter when using HTML5 sectioning elements. This, as it turns out, is not the case. As a result, developers are now starting to use a backwards-compatible implementation of HTML5 sections instead. So, instead of using sections+h1 we use sections+h1-h6.

In many cases, this will be a minor change to code dealing with sections in CMS systems. The headings used in the original article can be replaced by either sections+h1s or sections+h1-h6 elements.

Ideally, the WYSIWYG tools should implement HTML5 sections directly, but this can be difficult to get working in across browsers using JavaScript. Therefor it might be easier to simply save the h1-h6 headings in the content, and then replace them with HTML5 sections+h1-h6 (or h1 exclusively if you feel confident).

The important thing to keep in mind is that the HTML5 document outline is not implemented properly in browsers (a bug?). This basically means that users relying on AT (assistive technology) will not be able to learn the correct relationship between sections on a page.

This is a minor accessibility issue, and AFAIK only affect people with eye problems. Nevertheless, some users who use screen readers find it useful to know the structure of a page, and therefor it may be a good idea to use a backwards-compatible implementation – for now. At least until these UAs (User Agents) fix their buggy implementations.

We have used sections+h1 exclusively on Beamtic for some time, and only recently switched to the backwards compatible solution. So far, there has been little or no changes in our rankings as a result. However, some users might benefit from it.

HTML4 and multiple h1s

Some SEO-focused sites claim that HTML4 only allowed one h1 per page. This is not the case. You could have as many as you wanted. If you still use HTML4, the recommendation is to use as many as it makes logical sense to have on your page.

Despite HTML4 not having dedicated sectioning elements like HTML5, the same logic can be applied to HTML4 documents. Again, this is a minor theoretical thing, and unlikely to affect your rankings. However, it might actually help some people using screen readers.

Imagine the following document outline:

Sections + h1-h6 in HTML

The above correctly uses multiple h1s on a page to create a document outline that will make sense to people using AT. If we had instead used an h2 for the navigation menu, the document outline would not match the logical structure of the page.

The navigation menu is obviously not a subsection to the main article, so we would be required to use a heading that would structurally place it on the same level as the article, or maybe even on a level before that (if possible).

The below structure represents a less correct markup, using only a single h1. Again, this is on a theoretical level, and unlikely to cause any harm. However, we still recommend against using it.

The outline of only using one h1 heading.

The above would only make sense, if the navigation menu belonged to the article, and was used to navigate the sections inside the article. This would be the case with a table-of-contents menu.

HTML5 and Living Standard

The HTML5 (w3c) specification was changed to reflect the lack of implementation, and while the Living Standard (WHATWG) specifically mentions the possibility of using h2-h6 elements, it is not very clear about the current state of implementation when using h1 exclusively.

The HTML5 document outline algorithm is not implemented in browsers yet. This means very little for most users, but for users who rely on the document outline to navigation, this can cause a small accessibility issue.

It basically means that even though you are correctly using HTML5 sections+h1s, browsers will incorrectly interpret the sections as being on the same level. So, a page that is structured like this:

The outline of sections+h1 according to standards.

Will instead be presented like this:

The real outline when using h1s exclusively.

This is obviously a bug in browsers, and should in theory be easy to fix. Maybe if we open bug reports on the open-source based browsers we might be able to pressure them into implementing it.

It mostly matters when you use a section level deeper than h6, which is likely rare. Nevertheless, I still think this is something that should be fixed.

Should you stop using sections+h1? That is entirely up to you to decide. I recently switched to sections+h1-h6 on Beamtic. But, I might decide to switch back later. This is mostly an experiment. I do not really care about the lack of support for sections+h1, and SEO-wise it seems to have no affect that we only use h1s – so this should not hold you back.

Sources

  1. My site's template has multiple H1 tags - Google Webmasters (2017) - YouTube.com
  2. More than one H1 on a page: good or bad? - Google Webmasters (2009) - YouTube.com
  3. Using HTML sections and outlines - developer.mozilla.org

Comments