Deciphering HTML5 Heading Tags

by Matt Montaruli on March 8, 2012

deciphering html5 heading tags Deciphering HTML5 Heading Tags

The semantics for how headings are ranked in HTML5 can be a little confusing. Let’s see if we can figure out how they differ from HTML4 and if this new specification has any impact on SEO.

Headings

According to the HTML5 W3C Draft, H1-H6 tags are headings of a particular section (note: not page). H1 is ranked as the most prominent, and H6 is the least prominent. H1 is considered the section’s heading, whereas H2-H6 are considered sub-section headings.

With HTML5, you can now have multiple H1 tags in different sections, each with different rank. You can also specify the different rankings of H1 tags by how they are nested in section tags. For example:

<h1>Title One</h1>
<h2>Title Two</h2>
<h3>Title Three</h3>

From a heading rank perspective, is the same as saying:

<h1>Title One</h1>
<section>
<h1>Title Two</h1>
<section>
<h1>Title Three</h1>
</section>
</section>

So, the presence of H1 tags in nested sections can reduce the semantic prominence rank of an H1 tag.

Appropriate Uses

Heading tags no longer represent a heading’s rank for the entire page, they represent the heading’s rank for a given section.

NOTE: When I refer to “section” I am specifically referring to the following tags: article, aside, nav and section. These tags are “sectioning content elements” in that they “define the scope of headers and footers” (W3C Draft).

If a section is nested within another section, the child section’s main heading (H1) is syntactically ranked lower than the H1 of the parent section.

This means that while you can certainly utilize the old way of ranking, this new specification allows you to look at heading rankings within the scope of a given section, not just the page.

This change makes it easier to keep track of heading rankings. With HTML 4, you’d have to stop and think about how prominent you’d want a given heading with respect to the rest of the page. For larger pages, this could get quite tedious.

Now, if this is a heading for a new section, it’s safe to identify the heading as an H1. If it is a subheading of the section, it’s an H2.

However, don’t utilize this new heading structure if you don’t use the article, aside, nav or section tags. Additionally, you might not want to use the new heading scope if you find that you are unnecessarily nesting section tags for no semantic reason other than to signify heading rank.

Most importantly, if you find using the traditional H1-H6 ranking easier, go with that. It’s a matter of preference.

Potential SEO Issues and How This Affects Rankings

Rand Fishkin, CEO of SEOmoz posted on Quora back in June 2010 that heading tags have very little impact of SEO ranking.

He also elaborated that this new nesting should not affect search engine rankings.

CSS Styling

This is where things get tricky. Chances are, you’d want a nested H1 tag to have a different style than a non-nested H1 tag.

Traditionally, this was very easy to accomplish using H1-H6 tags. However, with the new method, it would appear styling would best be accomplished through CSS descendent selectors.

This is quite inconvenient. Nicole Sullivan has some interesting suggestions for ways around this. While I think the idea of applying class names to heading tags to identify rank makes sense, why not just stick with using the old H1-H6 method?

Ultimately, it depends on preference and your style as a developer. There is certainly plenty of merit to adding a .h1-.h6 class name. In the end, it’s entirely up to you.