The Truth about “The Truth About Multiple H1 Tags”

HTML5 logo — I am the 'alt,' not the 'title' I’m a bit behind on my reading. There is always some new wiz article on web technologies and it’s hard to keep up. Since any chummer can write one, sometimes you have to approach them with caution even if they’ve survived the meat grinder of public review for as long as a week.

Yesterday I stumbled across The Truth About Multiple H1 Tags in the HTML5 Era at Tuts+ and wasn’t sure I was going to get much out of it. Its promises were loft:

With the advent of HTML5 the answer to this question has significantly changed in both SEO and technical regards. It’s now not only possible to have multiple <h1> level headings per webpage that will make sense to search engines, but in most cases it’s actually the recommended course.

The pre-HTML5 <h1>

The article starts by painting a picture of how the <h1> element has been used in the pre-HTML5 world. It suggests that developers have made web pages where the location of the <h1> changes from page to page. From the header area on one page, to the article title on another, only to have the header area replaced with a <p>.

I take issue with this based on my own experience. Having built web sites since 1994, having worked with dozens of content management platforms, having peeked under the hood of thousands of sites, this just doesn’t match my experience. The author, however, makes no effort to back up this assertion, which seems odd given how easy it is to pull data from WebDevData.org.

While it seems like a moot point, it indicated to me that the rest of the post was going to be built on shaky ground. Which it is.

The Vaunted Mythical Document Outline

The core thesis of the post is built around the document outline (simply evidenced by the headline Why Headings Matter: Document Outlines).

The problem is that the document outline doesn’t really exist. It’s not real. In the words of Steve Faulkner, one of the W3C editors of the HTML5 specification,

The HTML5 Document Outline is a dangerous fiction

In that same post, Faulkner also explains:

If you as a developer want to provide a meaningful document structure, use the <h1><h6> elements to express document structure. DO NOT rely upon the HTML5 document outline. By all means use the HTML5 section elements, but do not rely upon them to convey a meaningful structure. If at some point in the future the HTML5 document outline ceases to be a fiction, you will be covered as the use of h1h6 is backwards compatible.

In fact, the HTML5 specification itself clarifies this in only a few words:

Sections may contain headings of any rank, and authors are strongly encouraged to use headings of the appropriate rank for the section’s nesting level.

Let’s forget about what the HTML5 specification says. After all, just because the specification says to not use <center> doesn’t mean it’s not supported, so maybe we should look to the browsers instead?

The browsers don’t support the document outline.

So much of assistive technology (such as screen readers, for example) relies on the browser parsing the page that moving to an all-h1 structure can actually reduce the usability of pages for some users. According to the 2012 WebAIM screen reader user survey, ~82% of users rely on the headings to navigate a page. Creating a flat page structure via an h1 everywhere approach can be a huge problem.

This isn’t new information either. Finding articles from two years ago stating as much is pretty easy.

To simplify a best-practices approach, Faulkner even restated it on Twitter this morning (after he saw my Twitter rant last night):

SEO, or the Magical Unsupported Acronym

The introduction to the article also promised a boon to your SEO efforts if you used this HTML5 all-h1 approach.

I challenge you to find any explanation of how this helps SEO: justification, links to evidence, quotes from Google/Bing/Yahoo, etc.

In fact, when asked in the comments how this all relates to SEO, the author essentially backs away from the original assertion and instead discusses schema.org syntaxes and the need for relevant content.

Conclusions

Don’t trust articles that don’t present you with evidence (or links to evidence). Don’t buy into SEO claims that are never justified. Build your heading structure for backward compatibility.

Update: January 5, 2014

This conversation has led to a discussion on the W3C HTML Working Group mailing list to revisit heading advice in the HTML5 specification.

Update: January 25, 2014

The Mozilla Developer Network has updated its article Sections and Outlines of an HTML5 Document with the following statement:

Note: The HTML5 outline algorithm as described below is not implemented in user agents, as a consequence, users who make use of heading semantics are exposed to the HTML 4 document structure. The description of problems solved by HTML5 is theoretical only.

Update: February 24, 2014

A post over at Treehouse, How to Use The HTML5 Sectioning Elements, discusses sectioning elements while avoiding referencing the document outline. At least until the comments. I dived in to try to correct, but it’s clear bad advice is still circulating and probably will for quite some time.

Update: April 17, 2014

As Steve Faulkner reminds us on Twitter, we should not rely on the HTML document outline algorithm. Now it’s been codified in the (draft) spec:

There are currently no known implementations of the outline algorithm in graphical browsers or assistive technology user agents, although the algorithm is implemented in other software such as conformance checkers. Therefore the outline algorithm cannot be relied upon to convey document structure to users. Authors are advised to use heading rank (h1h6) to convey document structure.

Update: September 15, 2015

It seems the WHATWG spec isn’t so concerned about clearing up this issue, per bug 83.

Update: January 22, 2016

Steve Faulkner has asked What to do about the document outline? on the W3C HTML spec, specifically looking for suggestions on how to address expectations, practice, and the spec.

Update: April 17, 2016

Another step toward correcting the spec:

This may happen in the next Public Working Draft, as early as May 2016. More details in the issue tracker.

Update: June 9, 2016

That’s it, the spec has been updated (corrected):

Now the HTML 5.1 specification requires developers to use h1h6 to convey document structure. The simple reason for this change is that the HTML5 document outline is not implemented and despite efforts to get it implemented, the general response from user agent developers has not been enthusiastic. You can read the updated advice and requirements in the HTML 5.1 specification

8 Comments

Reply

I don’t think it’s correct to say that no UA implements the outline algorithm. You will note that many will display h1 elements inside sectioning elements smaller than the main h1 element.

In response to mark. Reply

If you can show me a the DOM from a browser that shows nesting that conforms to the outline algorithm, I'll believe you. I say with confidence that no browser supports it because browser supports it.

What you are citing is display, which is most likely a function of the CSS from the sites you've seen it in play. Display is independent of an element's position in the DOM.

If you can tell me sites you've seen this behavior along with browser/OS then I'd be happy to test them for you.

In response to mark. Reply

browser implement the suggested CCS http://www.w3.org/html/wg/drafts/html/master/rendering.html#sections-and-headings This is not an implementation of the algorithm, it does not produce a document outline or change the semantics of a heading, as h1 is still a h1. This info may be helpful https://www.w3.org/wiki/HTML/Usage/Headings/h1only

Reply

[…] Note that I don’t use an h1 in the updated menu. I wrote that back when I was buying into the document outline algorithm, which doesn’t exist. […]

Reply

[…] Die Dokumentstruktur solle durch h1-h6 abgebildet werden. (Codebeispiel im Wiki) Ausführlich dazu Adrian Roselli mit weiterführenden Links und […]

Reply

Just so you know — any “good advice” you may think you have to offer people is made much less appealing by your horrible negative attitude.

Jarnet D; . Permalink
In response to Jarnet D. Reply

Thanks!

aroselli; . Permalink
Reply

[…] Die Dokumentstruktur solle durch h1-h6 abgebildet werden. (Codebeispiel im Wiki) Ausführlich dazu Adrian Roselli mit weiterführenden Links und […]

Leave a Comment or Response

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>