More on the Correct Use of Headings

Tuesday, December 6, 2005

After reading my last entry on headings Rosemary put up a poll on the port80 forums which sparked an interesting discussion about headings. It first made me think that I hadn't really made myself clear. It also surprised me that people didn't really think it a serious issue. At the time I wrote it, I was putting bits of this site together and questioned something I always took for granted.

Only surface deep

This is something a lot of web professionals do in their own websites, including me. You arrange the headings around a vague notion of hierarchy that ends up being only surface deep. The common approach is to sprinkle the side column with h3 titles because somehow they are at about level 3 in the site hierarchy of titles.

There's a problem with that approach

The semantic markup approach suggests you should create meaningful markup so that your layout code describes the meaning of the content and not the visual presentation. And a lot of professionals buy into that approach; so do I. But here's what is missed. Any webpage has a visual representation but there is also a DOM representation of the content. The markup creates it's own document structure underneath the visual layer.

The visual representation is for sighted human beings and the DOM representation is for automated processes and other non-visual user-agents.

If you have placed a h3 title in a column, a user-agent should be able to navigate back up the DOM and find the h2 to which it belongs, then on up till it finds the h1 and finally the sectioning element. However I often find this:

<div id="content">
<h1>Site Title - Latest Updates</h1>
<h2>entry 1 title</h2>
<h2>entry 2 title</h2>
...
</div>
<div id="side-column">
<h3>Search</h3>
<h3>Blogroll</h3>
...
</div>

In the DOM representation this means that the search and blogroll titles belong as a sub-headings to the last entry title and that is plain wrong.

Choices

I think you have 2 choices, either don't use headings at all for the side column, or start a new hierarchy at h1. port80 member, nickobec, supports the former as it preserves the clarity of the page, he suggests there should be only one h1 in a page. I don't necessarily agree, but it would still be better than the above.

On the web I've discovered a wide range of approaches; Molly Holzschlag's blog supports a clear heading hierarchy in the DOM while Jeffery Veen's site doesn't.

But I think that despite all the progress in semantic markup and web 2.0 there's still a lot of focus on the visual representation; the DOM representation of the page is still only a background concern.