Headers are important. If there aren’t any headers you will annoy people, ‘cause you don’t let them scan your text. Good markup is also important, but not from the end user’s point of view (the user with a graphical browser that is). And let that be the place most designers (not all) look from. They don't care about semantics. What they forget:
And there is probably more, but I just want to make my point clear. Search Engines know the difference between h1 and h2, why not use this in your advance? No, that way their little header gets too big. Nonsense of course, that's why CSS is invented. And if you want to use a graphical header you could use:
<h1><img src="" alt="" /></h1>
Why you shouldn't skip a header. From h2 to h4 for example. This rule is not enforced by the formal syntax of HTML, but it has to do with accessibility. It also makes more sense not to skip a header level. Why would you? As opposite to this you may skip from h4 to h2 if you wish.
Try to use only one h1 element as the most important one of your site. This is especially good for a Search Engine (like Google), which, if you use one, exactly knows what's the most important header.
When CSS Zen Garden came, there was a special method used for headers. The Fahrner Image Replacement technique. Now there is found a new method, which doesn't require the extra markup, but a (really ugly IMHO) CSS hack. Two people find exactly the same method independently: Seamus Leahy and Stuart Langridge.
These methods are ugly, but necessary for CSS Zen Garden. I personally like the CSS3 method:
h1{
content:url(toplevelheader.png);
height:; /* image height*/
width:; /* image width */
}
Beautiful isn't it? It's implanted in Opera already, maybe I'm going to feature request this at Bugzilla (you never know :)). So you read this, you know the all the methods available. Go, Try and don't come back before you site is completely converted!
You are of course absolutely right! I was reminded of this just last night at http://www.fixingyourwebsit...
I love the way CSS3 will allow us to do this. In the mean time I have my own alternative method:
h1{
background:url(toplevelheader.png);
height:; /* image height*/
width:; /* image width */
font-size: 0;
}
A slightly less ugly hack, IMHO...