The Trouble With H1s

OK, so I’ve posted the background to the problem I’m pondering. This issue has come back after reading an SEO report of the site we’re working on. One of the recommendations was to use a unique, relevant level one heading for each page. Fair point – we’d adopted quite a common model of using the service brand name as the root heading for each document.

So I have to admit, if you were authoring 30 different documents, the first thing you would find in each would be a relevant title / main heading for the doc. In a similar way, if you’re consuming an XHTML document, it would be great if the very first piece of content was a very relevant level 1 heading.

This helps a couple of issues – firstly, search engines can give greater weight to what the page is actually all about. If the true page name / purpose is buried halfway through the doc as a level 2 heading among several others, there is no way to ascertain that it’s actually much more important (than Site Navigation, for example). The second is accessibility – rather than listening to the same chunk of guff at the beginning of every page, the very first thing a screenreader user will hear is a very descriptive heading, giving context to the content on the page. All good.

To have a good document structure, with sections, and subsections, it is necessary to have the root heading at the start of the document. It makes no sense to have an H2 before an H1 in the doc. Think about a tree structure as how the document is organised.

You end up with a great ‘un-styled’ document this way. The problem is when your visual design includes the page heading, and requires it to be mid-way through the document content. What can you do? You already have an H1 at the start of the doc, which means repeating yourself. Naturally you wouldn’t need the additional heading as you’ve already set the context.

This mostly comes about as it’s very unusual for it to be ok for the H1 at the very start of the document to be the first thing visually displayed on a page. Therefore, you put it in to give good document structure, but style it so it isn’t visible.

I’m not particularly happy with the best solution I’ve come up with, but it’s better than not using the H1 properly – if the design requires the title to visually appear midway down, we have to include it (again) in the document content. However it just seems wrong to have 2 headings on a page with the same text, therefore I’m using a paragraph.

This gives an overall structure like so…

• Lister’s All-time Favourite Movies
• Brand Information
• Site Navigation
• Main Content
• Specific page content (including a P re-iterating the page title, if the design requires it)
• Page Footer

I quite like having the heading ‘Main Content’ in the document structure, as it means you have a familiar, consistent place to go to for the page specific content. We can then provide a skip-to link directly under the H1.

If you can think of a better solution to this, please let me know (soon!). I’m currently changing every page in the site, and it’s a bitch.