The h1 debate
3 February 09
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 an <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>.
Footnote: Clearly my position ought to be backed up by my source code. However, as it happens, the markup of my current template gets it completely wrong. This will be fixed in the upcoming redesign.
Subscribe via RSS
Follow me on Twitter
6 comments on The h1 debate
Cennydd, firstly thanks for the post. I didn’t realise when I made this comment that it would spark such a huge debate.
The response has been great, and with opinions from people like yourself, Jeremy Keith, Paul Boag and Molly E. Holzschlag the response has been amazing.
I think that using an H1 for the same text (company name or logo) on every page is less beneficial than marking up the page title as an H1. I have however, during this discussion decided that it might be beneficial to markup the homepage name or logo as an H1.
My research has also led me to screen readers, where users navigate by the headings. By having the same heading at the top of each page (and the most important) the user has to hear the company name/logo every time, and skip it.
I am still open to opinion though, and have used both methods in the past.
You’re bang on in your thinking there Cennydd. h1 for the heading of the page. If that page happens to be a home page then it’s likely the site logo/title should be marked up in an h1 as well, cf. http://clagnut.com/.
On the clagnut home page, I also mark up the heading of the first blog post in an h1, partly due to ease of styling and CMSing, but I think it can be justified on the principle of heading level being equivalent to importance. I take that as my guiding light when marking up headings.
Where part of a web page takes the form of a written document, such as a blog post or report, the headings should logically follow a heirarchy, but as soon as content is no longer in a document format, the principle of importance must take over. Heading heirarchy is almost never taken out of context, the oft-cited screenreader user for example (in my experience) will cycle through *all* headings on a page and yearns, not for heirarchy, but for consistency when attempting to create a mental map of a web site.
Perhaps there should be some kind of “class” or rel=”static” attribute that tells both screen readers and search engines that this is an element on the page that doesn’t change throughout the site and is used more or less for presentation? The more I think about it the more I agree that header tags should be used for dynamic content.
-Andrew
@Andrew, I’m not yet overly familiar with HTML5 (although it’s on my backlog!) but I wonder if the <header> element might be used this way. The static site header could sit within in, even perhaps as perhaps an <h1>, and be interpreted as such by screen readers etc.
A good first step, as suggested by Jon Tan’s article, might therefore be to mark up this header as <div class=”header”>. I’ll have a play with this in the upcoming redesign.
thought-provoking, but hardly a debate :)
generally the H1 should be descriptive of the particular page it sits on. it definitely depends, but I’d think of exceptions to this only in the most uncommon circumstances.
[...] debate assumes a single <h1>, but questions what content should be inside that <h1>. Site name? Company name or logo? Page [...]
Add a comment