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 kryogenix.org 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?