Dynamic Flash

Whilst flicking through my favourite blogs over a nice glass of red wine, I came across a post by Andy Budd discussing appropriate use of headings in semantic mark-up. Since Andy has highlighted the issue far more eloquently than I could, I’m not even going to try explaining the whole issue here – I’d suggest you read his article before carrying on.

The basic conclusion of Andy’s post is that slapping your site title in an h1 tag is not necessarily something you should be doing if you’re aiming to give your mark-up maximum meaning. We see a lot of sites these days that are striving for semantic mark-up but “abuse” the h1 tag, using some crazy CSS like the following to display a header image instead of the actual heading.

[css] h1 { text-indent: -1000em; width: 800px; height: 60px; background: url(header.gif) no-repeat; }[/css]

This gives the heading text a huge negative indent to push it off the page whilst still keeping it accessible for screen readers, and places a background image in its place.

Andy argues that the h1 tag should be used…

…to describe the structure and content of the current page, not to describe the structure of the site or how this particular page fits into a larger hierarchy.

To be honest, I’m not entirely sure where I stand on this issue. The number one question that springs to mind is which tag we should use for the site title if the h1 tag is inappropriate? Surely it has to be somewhere in the mark-up (unless the title of the site isn’t important?) but the only other real alternative is the <title> tag, and that’s generally a combination of the site title and the page title. Is that good enough? If it is, does the fact that those using screen readers have to make an educated guess at the title of the site is that acceptable? If it’s not good enough, what are we left with?