In response to CSS-Trick’s post “Rethinking CSS Image Replacement”, I have to respectfully disagree with wrapping your logo in an H1 element.
H1 should be used to describe the page below it, using it on every page to wrap a logo isn’t giving you any benefit for accessibility or SEO. Its a waste of a perfectly good (and important) semantic tag.
I recommend keeping things simple, and using the tag names as they were intended to be used:
<div id="head">
<img src="/images/logo.png" alt="FooBar Logo" />
<!-- tabbed navigation or banner advertisement may go here -->
</div>
Using the #head rule, I can position the image and any children elements, or apply a background gradient to the entire div. Its easier to style any navigation lists or banner advertisements as well with a common parent ID “#head” using the element names as sub-selectors.
<h1>Topic of the Page</h1>
<p>Intro paragraph about The Topic</p>
This is the original (and still relevant) intended usage of an H[1-5] heading element.
CSS-Tricks.com is a great web design blog by Chris Coyier — I highly recommend reading it for web designers.
W3C Tips for Webmasters: Use for top-level heading and : the most important element of a quality Web page.
Honestly, I’d use the h1 for the logo description, if the logo is a replacement for your blog/page title. I think, that the page title is the most important headline on every page, followed by the h2-tag for the chosen topic.
The h1-tag then labels every page as “your” page. Surely you need to give a correct explanation via alt=”" or else, to ensure displaying the title even without images / css enabled.
The h2-tag specifies this general page label with a further description. Isn’t that a more logical for accessibility and SEO?
Seems as if this issue needs further discussion ;-)
I agree with Markus on this one. I wrote up a Simple Print Header concept which you could easily alter from a print-only div class to being h1 as print only.
I think it is only appropriate to wrap your logo in an
h1on the homepage. All other pages, theh1should be the topic of the page.I agree with Trevor Davis. In most cases, the topic of the page for a homepage is the company/site name but on content pages that isn’t the case.
Also I’d recommended you use .#head (id) as opposed to .head (class) in your CSS – as (I imagine) you won’t be reusing that class elsewhere on the same page.
First of all using the H1 for you logo is not smart regardless if it’s an image or text. I see the accessibility value, but for SEO it is very bad. The h1 represents each individual page not every page in the site. Matching your title tag and h1 tag will make for better SEO.
@phil — Yes, ID is better than class, I made the change in my example.
If your H1 includes the topic of the page (not just the name of the site), then I would say that it shouldn’t be cluttered with a logo image, and only keep the Title of the page inside the H1 tag.
You’ll find pretty good results with clean title and h1 tags and good content.
[...] I read an answer from chovy.com which suggests to use the h1-tag for the specific topic of each [...]