The Shift to HTML5 Sections

Should you make the shift to using HTML5 sections in your pages?

How the section element is used has been covered in the reference, so rather than showing how to use the different sectioning elements, this article will be deal with different concerns around shifting to the new sectioning system in HTML5.

<section>
<h1>Heading</h1>
<p>The rest of the content...</p>
</section>

The Effect in Search Engines

A common concern is how a shift will effects a given sites placement in the search engines, especially in regards to using strictly H1 instead of the numbered headings. We see no reason why this would be harmful to an otherwise fairly well-reputed site, at least not on its own; you would really have to do something dubious to trigger a penalty – and using multiple H1s wouldn't be one of them. Matt Cutts also addressed this in one of his famous webmaster videos, where he specifically discusses the use of more than one H1 per page. The recommendation is to use it where it makes sense.

Traditional Sectioning System

Considering the old sectioning system, having multiple h1s has never been prohibited, and there are a number of situations where it would make sense from a semantic view point.

Navigation-menus should nearly always have their own h1, to separate them clearly from the main content; this has however not been widely practiced. There have been, and still are, many misconceptions circulating when it comes to multiple h1s, some of them would include:

  1. Multiple H1s is harmful for SEO.
  2. Multiple H1s is semantically incorrect.
  3. Multiple H1s is not allowed by the HTML standard.
  4. Multiple H1s create navigational problems.

1. Multiple H1s is Harmful for SEO

Lets just discuss the first of these for a moment. When it comes SEO rumors, there's often a grain of truth to them, but since there's also no defined rules we can work with, they also tend to originate from extreme scenarios, risen often as a result of bad SEO. Normal use of H1s would never trigger a penalty, or any negative effect; most likely one would have to combine it with other suspicious activity, which is almost a unconscious tendency in the SEO community.

Its very difficult to track down the cause for sudden drops in rankings, you can rarely pin it onto a single factor alone; most often it is more likely to be a number of different variables playing together.

2. Multiple H1s is Semantically Incorrect

There are many so called experts trying to argue semantics where non exist, and where it isn't important; in the case of using more than one H1, it is one of the few places where it should be clear.

If the main content is placed before navigation in the source, using h2s for navigation would imply that the navigation belongs to the content on a page; this doesn't make sense semantically, but yet its unlikely to have any real harmful effects. However, if you used h1 for the navigation instead of h2, this would make a new section on the same level as the h1 for the content; implying they are separate entities on the page, both belonging to the sectioning root.

3. Multiple H1s is not Allowed by the HTML Standard

Perhaps this misconception comes from a misinterpretation of the standards mentioning the h1 as the top-level heading, and certain examples using h2s for navigation. However, it is not really prohibited to use h1 where it makes sense, such as for navigation, to represent both navigation and content on the same logical level in the page.

4. Multiple H1s Create Navigational Problems

This last misconception is most likely related to screen readers, but the WCAG makes no mention of multiple h1s as a problem; so from an accessibility point of view, it just doesn't seem to have any negative effects. Some of the confusion may originate from the interpretation of http://www.w3.org/TR/html4/struct/global.html#h-7.5.5, specifically:

There are six levels of headings in HTML with H1 as the most important and H6 as the least. Visual browsers usually render more important headings in larger fonts than less important ones.

This is actually misleading, because headings has much more to do with the structure of a page, than the importance of each section. If a page has multiple separate topics – such as a page containing a navigation column, which is usually a part of the website and not the content itself – then it would be incorrect not to use multiple h1s to indicate this structure.

The new Sectioning Elements

Elements that are not recognized will typically just be ignored by search engines, or perhaps be treated as empty div elements at most; so in most cases, you should be able to use new elements without worrying about how it will be interpreted by search engines. Section elements in particular will not have any harmful side-effects under normal circumstances.

Search engines do not need to understand the level of sections on a page, as such understanding would be used minimally when ranking a page.

Those who are really worried about the effects of using strictly h1s can still use h1-h6 in combination with the section element.

HTML5 Sectioning Elements

There's no reason to hold back on new technologies if they are widely supported, and have no unwanted side-effects. The advance of the HTML5 sectioning elements should end the discussion on multiple h1s for good, and hopefully also re-write the unwritten rule of having only one h1 per page.

Many benefits from using the new elements have yet to surface, but there's a lot of potential benefits. One of them is for visually impaired using assistive tools, such as screen readers to help them navigate, or even read the content on pages. Navigation for such users will be much easier, as tools could easily allow them to skip to sections of interest.

External Sources

  1. WCAG20
  2. Headings: The H1, H2, H3, H4, H5, H6 elements
  3. Matt Cutts: More than one H1 on a page: good or bad?