Alex Rivera | Logout

H1 in article page - site title or article title?

Asked 2008-11-06T12:20:44.720
64

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

html usability accessibility semantics
Edit
Report

1 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:

<ul id="site-navigation">
  <li><a href="/">Home</a></li>
  <li><a href="/about">About me</a></li>
  <li><a href="/contact">Contact</a></li>
</ul>

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.

<body>
  <div>John’s blog</div> <!-- the site title -->
  <h1>My first blog post</h1> <!-- the article title -->
  <p>…</p>
  <h2>Navigation</h2>
  <ul id="site-navigation">…</ul> <!-- the site-wide navigation -->
</body>

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:

<body>
  <div>John’s blog</div> <!-- the site title -->
  <h1>My first blog post</h1> <!-- the article title -->
  <p>…</p>
  <h2>Why I’m blogging</h2>
  <p>…</p>
  <h2>Why you should read my blog</h2>
  <p>…</p>
  <h2>Navigation<
answered 2013-06-22T01:06:07.287

Your Answer