meyerweb.com

Thomas Jogin recently posted an interesting entry that asks about HTML headings. He starts out this way:

For some time now, something has been bothering me about the common way of marking up a document structure. First of all, it doesn’t seem like there is a consensus on wether or not to use multiple H1 tags, or any at all.

I agree: there isn’t a consensus on that point. There is also a lack of consensus on his second question:

Secondly, since H1-H6 are supposed to denote the structure of a document, do they really have a place in the side column as section headlines?

In fact, there’s very little consensus on heading use in general, except that you should use them instead of font size="+3" and that sort of thing. Headings make for more visibility in Google than does presentational markup, after all.

In considering Thomas’ question, Andy Budd goes to the specification, which is always a good place to start. As he points out, HTML 4.01, section 7.5.5 states:

A heading element briefly describes the topic of the section it introduces. Heading information may be used by user agents, for example, to construct a table of contents for a document automatically.

There are six levels of headings in HTML with H1 as the most important and H6 as the least. Visual browsers usually render more important headings in larger fonts than less important ones.

So as far as a semantic definition of the heading elements goes, all we have is that heading levels indicate degrees of importance. Nothing about what order they have to be in, or whether you can skip levels, or anything else besides the creation of a spectrum of importance, as it were. Because that’s all we have, there is plenty of room for people to fill in their own interpretation of what’s best. I approach headings as merely indicating a level of importance, and don’t bind myself to a decreasing numeric order. That’s my take on it; others feel differently. Let’s take a look at two cases where my approach led to very different results.

The first case is Netscape DevEdge. Here’s the markup skeleton for the first part of the home page as I set it up (the actual markup as of your reading this may be different):

<h1>
 <a href="/" target="_top"><span>Netscape</span> DevEdge</a>
</h1>

<form action="/search/app/" id="srch" method="get">
<h4><label for="search-input">Search</label></h4>
(...inputs...)
</form>

<h2>Netscape 7.1 is now available</h2>
(...paragraph text...)
<h2>The DevEdge RSS-News Ticker Toolbar</h2>  
(...paragraph text...)
<h3>Recent News</h3>
(...list of links...)

Here, the order is h1-h4-h2-h2-h3. I guarantee you that some readers are feeling a deep outrage right now, because we got more than one piece of feedback berating us for putting the headings ‘out of order’. The h4 was clearly out of place, we were told, and needed to be fixed.

The placement of the search markup in the document was dictated by our preferred document linearization, however. In an unstyled view (a really old browser, say, or a cellphone text browser) we wanted the masthead to be immediately followed by the search feature, and that to be followed by the main content. The main content was in turn followed by the sidebars, which was followed by the navigation and configuration links, and finally the footer. So we weren’t about to move the search markup just to make its heading level fit into a descending-number hierarchy.

We could have elevated the heading to an h2, but that struck me as being a poor choice. Is the “Search” title really as important than the top headlines on the site? I certainly didn’t think so. My only other option was to change the h4 to some non-heading element and style it that same as I had the h4 That’s certainly easy to do, since with CSS you can make any non-replaced element look like any other element, but that would mean the search area had no heading at all. That also struck me as a poor choice.

So I took the route I did. I suppose I could have, as Richard Rutter suggests, put in some extra headings to increase the structure and then “switched off” their display with CSS. That would mean inserting an extra h2 and h3 between the masthead and the search. What would they say? Personally, I’m not thrilled with that idea either, at least for the DevEdge case.

The second case I’d like to consider is meyerweb.com itself. Here’s the basic structure of the home page, at least as of this writing:

<div id="sitemast">
<h1><a href="/"><span>meyerweb</span>.com</a></h1>
</div>
<div id="thoughts">
<h3 id="thtitle"><span>Thoughts From Eric</span></h3>
<div class="entry">
<h4 class="title"><a href="..." title="...">entry title</a></h4>
<h5 class="meta"><b>entry date</b></h5>
</div>
<div class="entry">
<h4 class="title"><a href="..." title="...">entry title</a></h4>
<h5 class="meta"><b>entry date</b></h5>
</div>
</div>

Here, I skipped the h2, but other than that everything’s in a descending-order hierarchy. In this case, such an approach was a fairly natural fit to the information being presented. I don’t have an h2 on the home page because it’s reserved for page titles, such as the “Eric A. Meyer” at the top of my personal page. The page title of the home page would be “Home Page” or “Main Page” or something equally silly, so I left it off. (And yes, there are b elements in my markup, and I’m doing that on purpose. I’ll talk about it some other time.)

Meanwhile, in the sidebar, the section headings (such as “Distractions”) are enclosed in h4 elements. That makes them as important as entry headings, and I’m okay with that. I might have chosen h5 instead, but probably not h3. The one exception is “Blog Watch”, which is an h5 element. I don’t have any rigorous logical explanation for this; it’s all based on gut feelings.

In the end, I don’t think there will ever be a heading consensus. XHTML 2.0 attempts to bridge the gap by adding the generic h (heading) element, which helps create a descending-order hierarchy when combined with nested section elements. What bothers me is that the Working Group hasn’t decided whether or not h1 through h6 should be deprecated; to do so would in effect attempt to force a consensus in favor of a descending-order hierarchy. That would mean that headings were no longer as much about importance as they were about having a document that’s structured like a specification, or maybe an e-book.

In the here and now, though, we’re left to ponder these questions and arrive at our own conclusions. Each answer will depend on the temperament of the ponderer, and the project upon which the pondering is predicated.