Correct use of headings or "I was a closet h3 abuser"

Tuesday, November 30, 1999

I was a closet h3 abuser, and I bet if you'd admit it a lot of you are too. What's a h3 abuser? Well I'm gonna come out of the closet and tell you all about it.

There are those little boxes

On websites, especially blogs, there are those little boxes, often in column 1 or 3, full of links and stuff and they all have little headings. When making these little boxes you think "Well I should use a heading tag, because that's more semantic. But those heading tags look too big and those ones look too small, but that one is just about the right size. I'll make it <h3>."

Hands up who defaults to <h3> when they know they need a heading but don't know what size it should be? I hope I'm not the only sucker with his or her hand up right now. Speaking in my defense though, I was considering the way it looked unstyled, which is good to do right? Who knew changing your ways and thinking semantically would be so hard? In a previous blog entry I ranted about how WYSIWYG had no place on the web and yet the way I dealt with heading tags was doing just that.

OK, so <h1>, <h2>, <h3>, etc. represent a hierarchy and despite best intentions I was still using them in relation to the size of heading they provide.

Searching for best practices

Starting this blog only a little while ago I wanted to get it right. To put into practice all the new wave stuff about semantic XHTML, microformats, smart use of CSS and so on. But as soon as I started to add one of those little boxes to column 3 I became stuck. "It needs a heading, <h3> is about the right size.. no wait, it has to be semantic. If I use <h3> there has to be a corresponding <h2> or <h1> within the same content section." But I'd used <h1> for the website title and the page title and <h2> for the site slogan and <h3> for all the titles of the blog entries. My hierarchy was a mess! It needed straightening out so I went searching for some information about best practices for this issue.

I found a W3C document, a working draft, titled " Web Applications 1.0" and here's a quote regarding headings:

"The first heading in a sectioning element gives the header for that section. Subsequent headers of equal or higher rank start new (implied) sections, headers of lower rank start subsections that are part of the previous one."

"Sections may contain headers of any rank, but authors are strongly encouraged to either use only h1 elements, or to use elements of the appropriate rank for the section's nesting level."

–Web Applications 1.0

It couldn't be any clearer, really.

This Simplebits quiz from way back in 2003 and this W3C tip both support the use of h1 for the page title NOT the site title.

And finally this cool AJAX tooltips library at Ajaxian.com used the following markup for tooltips:

<div class="tooltip">
    <h1>Header</h1>
    <p>Contents</p>
</div>

This convinced me that the little boxes of stuff in column three should each have a <h1> for their heading because they are distinct sections.

<div class="infobox">
    <h1>Site Menu</h1>
    <p>Contents</p>
</div>
<div class="infobox">
    <h1>Nice People</h1>
    <p>Contents</p>
</div>

But then, I thought, maybe I could label the whole column <h1>Menu</h1> and then use <h2> for each box's title.

<h1>Menu</h1>
<div class="infobox">
    <h2>Site Menu</h2>
    <p>Contents</p>
</div>
<div class=<"infobox">
    <h2>Nice People</h2>
    <p>Contents</p>
</div>

Of course that would mean I'd probably have to hide the <h1> because I wouldn't want that visible. I needed a bit more perspective so I decided to start from the very top.

Rethinking the page structure

Firstly, the site title and slogan: no headings. The site title is reflected in the <title> tag, so it's only visible on the page for decoration. If I remove the heading tags, in an unstyled view, it'll just look like normal text at the top, which is fine by me.

The first real title should be the page title: it get's <h1>. Now the hierarchy associated with the page title is the page content so I can manage that separately from the rest of the page. Basically each blog entry will have its own heading hierarchy as appropriate. Within the entry body text headings will start at <h2>.

Now to deal with the dreaded column 3 full of odd boxes of stuff. Well, the first one is "Site Menu" and that is really the heading of a new section. In fact I think that is the heading for the whole column; it is the site menu. So that can be <h1> and all the other headings can be <h2> because they are subheadings within the site menu.

<div class="infobox">
    <h1>Site Menu</h1>
    <p>Contents</p>
</div>
<div class="infobox">
    <h2>Nice People</h2>
    <p>Contents</p>
</div>

Now in that column the headings can all look the same but they are now semantically organised as well.

Results

Actually, come to think of it, it wasn't that hard after all. It just needed a little consideration. It's also a useful exercise to reconsider your page layout as a document with hierarchical elements. Whereas before I'd just layout a page visually, main content in this column, assorted boxes of junk sprinkled around it and so on, I now see it as a coherent structure. If I place something on the page I now ask why is it there and how does it relate to the rest of the page? It's kind of how you'd write an essay but that's an awful analogy to use.

Why is this even important?

But, you may ask, so what? Why is this even important? Well, it may be a touch pedantic, but I think not caring is the slippery slope back to the crap markup of yester year. And we are meant to be striving for perfection, calling ourselves professionals and so on.

Besides, the semantic web approach just feels right and even though we may not see it immediately we have opened up all sorts of other possibilities. Because our pages are now meaningful data and not just visual layout instructions, that data can be manipulated consistently and predictably. For example if I wanted to automate a table of contents I now have a proper hierarchy within the content section to enable it.

Postscript

While I was writing this I came across this article, " Semantic Typography: Bridging the XHTML gap" Which talks about more than just heading abuse, but also mentions this:

" It streamlines the process of assigning heading tags for example which have always been quite arbitrary in the past."

That's it in a nutshell.

Update

I've written some more here: More on the correct use of headings.

Random outings from a chaotic mind