CSS Without Headings?

I've looking at Drupal theming for a while now. I just had an idea yesterday though. The theme I was analyzing uses an H1 tag for the site title and H2 tags for the headings over navigation. I tried to decide if this made sense for me or not. On many sites this may be appropriate. It's possible that the name of the site is the most important thing and the navigation includes a heirarchy of decreasing semantic importance. It's also possible that the site is like many sites. The site title is a random five letter word and the navigation has a title like "Navigation".

The specific theme I looked at also used H3 tags for the titles of comments. Again, this can be correct but isn't necessarily. Theme designers don't really know how the theme's going to be used by everybody so they have to make the best guesses they can. In my case, I've used H4 tags inside my post. I think that would mean that the comment title is being described as more important than the headings inside my post. Some comments I get are meaningful but I wouldn't make a blanket statement that they're all more informative than what I write. As an interesting aside, the links in those comments (on many sites) have the rel="nofollow" attribute applied which disclaims responsibility for the destination. That's an interesting semantic knot we've tied.

What if we took H1-H6 out of the theme? This is the idea I had yesterday. More precisely, what if the CSS didn't mention H1-H6. In my particular theme I could just replace them with styled spans. Then when I apply the heading tags, it's only for semantically meaningful headings. It also makes the heading tags available for my posts as I write them. On a Drupal theme this could be implemented in such a way that people who do run sites with meaningful site titles and navigation could still be accomodated. A theme could have custom settings which allow a user to turn on heading tags for particular parts of themed content where it's common to have something meaningful.

Doing this right assumes that the theme includes a CSS reset of course. Then a styled page can be manipulated until it looks right using CSS classes that apply visual style. Next it can be tested without CSS turned on and the page should still make sense, the largest text and headings corresponding to the most important bits.

For now I'm just going to pull the heading tags off of the static elements and make them more usable for content that I write. I don't know if I feel like writing themes for public consumption just now.

Your rating: None

It seems like it would be most semantically correct for any theme to reserve all hX tags only for actual content. Most everything else, such as navigation should be unordered lists and comment titles should be paragraph, etc.

In my case and for a lot of others I think you're right. There are some sites though where the whole site is about one topic. Take my other site SVG Basics for example. The whole site is just about the basics of SVG. The navigation on the site only reflects what each page is about. A site like that running Drupal could have a taxonomy for the articles and that taxonomy could be used to create the navigation. Then it's possible that the navigation is closer to the headings in a book.

But even then I'd probably do an unordered list for a title that shows up in navigation and make it an Hx heading only on the page that the link leads to.