H1 in article page - site title or article title?

Question

Within an article-oriented page (such as a blog post), the

element (level 1 heading) is commonly used to markup either:

• the blog title (i.e

Answer 1

For a typical website, e.g. a blog, the h1 should contain the site title. Yes, on every page of the site.

Why? In a website, there are various parts that are shared for all its webpages. Let’s take navigation as example:

  
Home
  
About me
  
Contact

This #site-navigation is repeated on every page of the site. It represents the site navigation, not the page navigation. The difference is important! {The page navigation could be a table of contents (like in a Wikipedia article) or a pagination for a long article.}

If you’d use the article title as h1, the site navigation would be in scope of this heading.

  
John’s blog
 
  
My first blog post
 
  
…
  
Navigation
  
…
 

So this markup conveys: The navigation (→ started by the h2) is part of the article (→ started by the h1). But this is not true, this navigation is not the navigation for the article. The links really are part of the whole site, and the site is represented by the site heading.

The problem becomes clearer when the article contains subheadings, too:

  
John’s blog
 
  
My first blog post
 
  
…
  
Why I’m blogging
  
…
  
Why you should read my blog
  
…
  
Navigation
  
…
 

As you can see, there is no way to differentiate the article sub-headings from the navigation. It looks like the article has three sub-headings: "Why I’m blogging", "Why you should read my blog" and "Navigation".

So if we instead use h1 for the site title and h2 for the article title, the navigation can be in scope of the site heading, by using h2, too:

  
John’s blog
 
  
My first blog post
 
  
…
  
Navigation
  
…
 

Now this markup conveys: There is a site titled "John’s blog" (→ started by the h1) and it contains an article (→ started by the first h2) and a site navigation (→ started by the second h2). Sub-headings of the article would be h3 now, of course.

---

Another problem by using h1 for the article title is that then there is typically content before the first heading, e.g. the site header including the site title and other stuff. For users that navigate via headings, this first content would be "invisible". So it’s good practice to give every separate block an own heading.

HTML5 formalizes this with the sectioning/outlining algorithm. It solves many outlining problems you might have had with HTML 4.01, because the content order can be (mostly) free now and you don’t have to "invent" actual headings if you don’t want to, thanks to section/article/nav/aside. But also in HTML5 the site heading should be the h1 that is a child of body but not a child of any sectioning element/root. All other sections are in scope of this site heading.