Which <H> to Use for Headers
February 13th, 2006 • Articles
I spent some time reading other’s opinion on which headings to use for entries. It’s shouldn’t be a big topic, but you’d be surprised just how many other perfectionist bloggers have discussed it. Colly has a great, though a little old, summery.
The most common issues with headings are these
- One vs. multiple H1 tags
- H1 for site title vs. entry titles
- Importance vs. Structure
- Sidebar/Navigation uses H2 or H3
The problem is that the specs say nothing to address these issues, they’re too vague on the details, and if you look hard enough you’d only find a few recommendations. So here’s what I came up with: Think of the site as if it’s going to be a published book . Imagine that the whole site is going to be printed on a few hundreds of pages, how would it look? Would it be outlined correctly using only headings? Would you be able to generate a table of contents?
One vs. Multiple H1 Tags
A web page is certainly different from a regular book, there is no clear cut between “chapters”. Some pages, like manuals for example, can contain multiple chapters, others contain a chapter per page, but the combination of all pages is where we can draw similarities between books and web sites.
There’s no real reason not to use multiple H1 tags in a single page, it’s just that we’re used to starting off with a root tag like and we apply the same thinking to H tags; everything should start off after H1.
But then again, what if I’m going to publish a book or a blog that has only a single huge page? Should my chapter (or blog entry) titles be contained in H2’s?
H1 for Site Title vs. Entry Titles
I think the most important part of a page is its title which should obviously map to a book’s title, except that book titles aren’t headings, they’re just that, titles. Most word processors have a separate style for titles, not surprisingly called “Title”; HTML doesn’t have one.
So, I’m going to follow the reasoning above to make a small exception for site titles and slap an H1 around them. We don’t have to, but it can be done. Some might prefer to use a simple <p> to avoid emphasising the site’s title, which is perfectly reasonable, an entry title a what’s important in a blog, especially when each entry has its own page.
Importance vs. Structure
Well, I can’t say I’m for either, but I’m for a balance of both. If we think with only structural terms we’d end up using a single H1 tag for the first title in a page and everything that follows is going to use H2, H3, etc. On the other hand, if we’re only going to think it terms of importance, we’d end up putting H4’s right after H1’s if the subtitle isn’t that important.
Like I said, I chose to go for a balance of both: Multiple H1 tags are perfectly fine, H2 for subtitles inside each entry, and so on. However, no jumping between levels. This makes is especially clean when I’m writing longer articles, like my “Iterators in PHP5″.
Sidebar/Navigation uses H2 or H3
Well, I’d leave this for personal taste. But for my site, I’m using a hidden H2 for the sidebar’s title for the sake of structural conformance, and every block’s title in the sidebar is contained in an H3. Again, this is mostly because the sidebar isn’t half as important as the content of the page itself, it can be thought of as mere complementary information.
Finally…
I know this whole reasoning might seem to exhaustive for a topic like this, but I had a few objectives to accomplish. I needed my site to be “outlineable” in any view, whether it’s the archives, search, or a single entry view. I also wanted my site to look good without stylesheets, that’s why the sidebar is always at the very end of the page (source-ordered, baby), and I still wanted the sidebar to appear in the outline (unlike What Do I Know, for instance). I hope I’ve done well on this one.