H1 in article page - site title or article title?

Question

Within an article-oriented page (such as a blog post), the <h1> element (level 1 heading) is commonly used to markup either:

• the blog title (i.e. the often-large site title at the top of the page, not to the <title> element), or
• the article title

What is the best choice and why?

To the site owner, who may want to shout out to the world the name of their site/blog, using a level 1 heading around the site title might seem to make sense.

From the perspective of what you are trying to communicate to the user, the site title is of less relevance - the article content is what you're trying to communicate and all other site content is secondary. Therefore using <h1> for the article title seems best.

I feel the <h1> element should focus on the article title, not the site title or other content. This does not appear to be a popular convention by any means.

Examples:

• Joel Spolsky uses <h1> for the article title, and an anchor for the site title
• Jeff Atwood uses no <h1> at all, <h2> for the article title and an anchor for the site title
• 37 Signals' SVN uses <h1> for the site title and an anchor for the article title

That's three different approaches across three sites where you might expect a strong consideration for correct semantic markup.

I think Joel has it right with Jeff a close second. I'm quite surprised at the markup choices by the 37Signals people.

To me it seems quite a simple decision: what is of greatest relevance to the consumer of the article? The article title. Therefore wrap the article title in an <h1> element. Done.

Am I wrong? Are there further considerations I'm missing? Am I right? If so, why is the '<h1> for article title' approach not more commonly used?

Is the decision of where to use the <h1> element as invariable as I put it? Or are there some subjective considerations to be made as well?

Update: Thanks for all the answers so far. I'd really appreciate some angle on how the use of the <h1> for the article title instead of site title benefits usability and accessibility (or doesn't, as the case may or may not be). Answers based on fact instead of just personal supposition will get many bonus points!

Answer 1

There is a W3C Quality Assurance tip about this topic:

<h1> is the HTML element for the first-level heading of a document:

• If the document is basically stand-alone, for example Things to See and Do in Geneva, the top-level heading is probably the same as the title.

• If it is part of a collection, for example a section on Dogs in a collection of pages about pets, then the top level heading should assume a certain amount of context; just write <h1>Dogs</h1> while the title should work in any context: Dogs - Your Guide to Pets.

Answer 2

As a screen reader user the heading level doesn't matter as long as it's consistent. Different blogs use different conventions, so there is no standard way to make it more accessible. Making sure the headings match to the content level is more important then what level of heading is used. For example if displaying a series of blog posts with comments all the blog posts could have heading level 2 and at the start of the comments you could have heading level 3. For an example of easy to navigate headings find any Wikipedia article with multiple sections and subsections. I can easily skip around main sections by using my screen readers navigate by heading feature to jump to any level 2 heading, and if I want to move to subsections of a given sections I will navigate to the next heading.