What seemed like an innocent little question to start off with, eventually become more of a informative discussion. So far so good, and I'm excited to continue on with this series. Note: Through the magic of Movable Type, I've set up a permanent spot for the quiz, which will collect all questions and wrap-ups in chronological order.

So what did we learn from Part I: Headings? I'll go on to pull out some notable comments and then attempt to summarize what people thought would be Good(tm) Markup practices. Remember, one nugget to get out of this is that there is no one right way to do something.

Notable Comments

The majority agreed that B was the more semantically correct choice. Here are some interesting comments that followed.

vlad:

...if the site is being viewed with a device or browser with no css support, the heading will still look like a heading

Sunny:

B is the semantically correct approach although A will be valid mark-up.

And there I think Sunny nailed it, getting right to heart of Jason Kottke's post.

Paul G.:

Using <p><b>…</b></p>, while perfectly valid, is semantically awful. It conveys no meaning about what is between the tags.

Andre Leistner:

It's interesting to see a quiz on semantic markup being marked up using non-semantic markup (div and span). You could have used an for the choices.

Heh heh, oops. Absolutely correct, and quickly resolved. :)

The conversation moved briefly over to the topic of where to put the page title -- does the site title belong in an <h1> or does the page title make more sense?

Bob:

I try to approach it in this fashion: If viewed completely unstyled, does the page look more or less like an outline, with headings, subheadings, etc.?

Paul G.:

Imagine printing out the document with no styling. The first thing you expect to see ... when you look at the page is the document title. It makes sense to look at the page and see "Dancing Habits of the Capybara" or even "Capybaras.net - Dancing Habits of the Capybara", but if all you see is "Capybaras.net", you cannot immediately deduce what the document is about or whether it is relevant to what you are looking for...

Really great point here I think.

kirkaracha (easily the best name):

The W3C recommends that the h1 be the same as the title. I interpret this to mean that both should refer to the title of the document, not the site.

It's hard to argue with that.

Summary

In conclusion -- why B?

• We know that an h1 tag will degrade nicely and look better in all browsers and devices.
• It describes what's between it better than the other choices. It's more meaningful.
• Search engines will look to h1 for keywords over p, b or span tags. And even more of a reason to put your page title in there.

What goes in an h1: site title or page title?

• Think of your page as an outline -- be conscious of the un-styled structure.
• Paul Gs test: if someone were to print the document, what should show up as the largest top heading? I'll say page title.

Stay tuned for the next question.