Structural markup nit: headers

Sunday 11 May 2003

There’s been a lot of talk lately about structural markup and CSS (for example, Simon), or maybe there always is among web techies. In any case, here’s my personal pet peeve about structural markup: using headers that start at something other than <h1>.

For example, the much-touted CSS Zen Garden has a clear structure: title (Zen Garden), subtitle (The Beauty of CSS Design), and then a series of headings (The Road to Enlightenment, So What is This About, etc). Yet the title is marked with <h1>, the subtitle with <h2>, and the headings with <h3>. Now maybe this is strictly speaking correct: they start with <h1>, and work their way down, but I don’t think it accurately reflects the structure of the document.

A number of great sites (both in terms of their content, and their push for CSS purity) cheat like this with headers:

  • The fabulous uses an <h2> for the title and dates, and <h3> for the entry titles.
  • The utilitarian but beautifully-designed SimpleBits has its first header as an <h4> (the entry titles).

IMHO, the first header tag can only be an <h1>, an <h2> can only appear after an <h1>, and so on. The only reason I can see for doing anything else is that if you turn off stylesheets, you don’t want enormous screaming <h1> headers in your face. Without stylesheets, the only way to get more reasonable headers is to use higher-numbered header tags. But that’s letting cosmetics dictate your tags, which is precisely what structured markup is trying to avoid. So what’s up with that?

» 4 reactions


In my case, how would you do it differently?

The logical structure of the document says that 'CSS Zen Garden' is the page title, appropriate use of an H1. 'The Beauty of CSS Design' is a sub-title, good enough for an H2. Then every other header is of equal weighting, so it becomes illogical to use anything but like headers, no?

I could potentially see the headers on the link lists being H4's, but other than that that, where else could I go?

(re: the other examples - I believe you're right in both your surmise and your conclusion. The inclination is to use something other than an H1 in cases where the CSS shows up because it renders so damn big by default.)
I'm not sure there is a better way to handle titles and subtitles. They aren't exactly headings, but plain HTML has no better construct to use.
Sorry for the delay in responding, it's been a bit crazy the past week.

I'm not sure I know where you're coming from. You mentioned that you "don't think it accurately reflects the structure of the document." - that is, building the page starting at H1 and ending up at H3/H4. So what is a better way to represent the structure?

I'm just plodding my way through the whole semantic web thing one step at a time, so I realize I may have missed a few more tedious points. I just spent a bit of time converting all the existing <span class="iL"> to <li> for exampe.
About structure: imagine that headers were displayed as numbered headings, like an ordered list, but with an implied hierarchy. Then the Zen Garden would be:
1. Zen Garden
1.1. The Beauty of CSS Design
1.1.1. The Road to Enlightenment
1.1.2. So What is This About?

I'm not sure this is the structure you meant when you coded it. That's all.

Add a comment:

Ignore this:
Leave this empty:
Name is required. Either email or web are required. Email won't be displayed and I won't spam you. Your web site won't be indexed by search engines.
Don't put anything here:
Leave this empty:
Comment text is Markdown.