SimpleQuiz › Headings › Conclusion

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.

6 Comments

  1. Pierce says:

    “Dan you turn me on.”
    Such are the dangers of putting a comment box on your posts…
    I guess the reason that no one is commenting on this post is because you’ve pretty much summed everything up. Every quiz should get this sort of post-match analysis.
    I like this simplequiz a lot but maybe something more difficult/controversial next time. Like which is the best image replacement technique. And why.

  2. Ali Rokni says:

    Very interesting and helpful articles, specially in Headings. However, I have noticed some web sites are not following the headings in proper way (if i am correct; h1,h2,h3…, h6 and formatting them via css) instead they use it as the size of it appears missing h2 or h3 between h1 and h4. (a good example of proper one is the outline of meyerweb.com )
    Cheers,
    Ali

  3. Tobias says:

    The new W3C validation seems to have the same idea: use hx as an outline.
    I like the feature that shows your site as outline. E.g. mezzoblue.com looks good in my opinion.
    Made me think about reordering my hx-strukture :)

  4. Elke says:

    Hm, much new for me about headings!..

  5. Mitch Bruke says:

    Great site guys… Keep up the good work :)

  6. I will be noteworthy to point out that styling the tags directly like so h1 {font:etc etc etc} can make for problems if on one page you want a different look to the heading. This is one reason why semantics ends up being ruined.
    So instead I suggest giving the h tags classes, that way a h1 tag could be, if needed, different on certain pages and semantics are then saved.
    I am still in a worry about some of my sites that use an image banner for the title, with the h1 tags hidden with css so the page is still semantic when viewed with no style. I read that google penalises for hidden heading tags and only goes by what is in effect seem by us.
    Also I was confused about the structuring of heading tags, but I opted for the fractal technique. H1 being the main page heading followed by loads of H2 tags, then only when an H2 section has sub sections do I move to the H3 tag and so on. This leads to some of my sites having just one H1 tag and then the rest are all H2 tags.
    I may be wrong about some of this but I think my implementation is probably spot on.