The h1 debate

Warning: There follows an arcane debate about HTML semantics, which will be extremely tedious to some.

Today has seen a minor revival of one the web’s perennial debates: whether the site header or page header is the most important. Its trivial intractability is perhaps only exceeded by the old UI chestnut of whether positive confirmation buttons should go on the left or right (think OK/Cancel versus Prev/Next). Frankly, it matters little, but I can’t sleep and I’m not one to miss out on a nuanced semantic debate.

Right now, you’re on my site Ineffable, reading a post The h1 debate. So which is the most important header on the page? Whichever is chosen should be marked up as <h1> (the HTML for the topmost header) for reasons of search engine optimisation, clean code, and so on.

The case for the site header

A purist might say that semantically and logically the site’s name is the primary tier. This would mean the hierarchy for this paragraph is: Ineffable > The h1 debate > The case for the site header.

While perhaps correct from an ontological perspective (a site has many articles, with many sub-sections), this has the drawback that the <h1> is the same for every page on the site. This is bad for search engines and may make orientation more different for those using screen readers. I also have a more fundamental concern, namely that this imposes a model that matches the designer’s understanding, but not the user’s.

The case for the page title

Pedantry is often important when it comes to good markup, but here I believe pragmatism must win out. This pragmatism arises when looking at the problem from the user’s perspective.

A user arriving at the site may indeed want to orientate themselves by seeing the name of the site, but their main goal is to find relevant information. This is particularly the case if they’ve come via a search engine, wherein they entered text of interest to them and leapt straight into the article itself.

The most important thing to a user is therefore what the page is about. This topic is far more likely to be represented by its title than the site name, and it’s logical that this title should be marked up as the <h1>.

My chosen hierarchy for this section is therefore The h1 debate > The case for the page title, with Ineffable possibly coming in as an <h3>. Note that, while an <h3> may be a subsection of <h2>, this isn’t demanded by the spec; and I think this is the right solution for this particular site.

This said, the answer may be that design classic “it depends” – with contributory factors including the size of the site, its purpose, and user behaviour. Particularly for small sites where users frequently navigate from the homepage down, I could see a site name <h1> being appropriate, while large sites with lots of ‘deep link’ traffic would be better suited by a page title <h1>.