Wrapping Logos with an H1 tag

Thu, March 13, 2008 — Category: Accessibility

Keep It Simple when writing semantic HTML and applying design rules in CSS.

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.

8 Comments »

373243

Comment by Kirk Franklin

March 24, 2008 @ 12:26 pm

W3C Tips for Webmasters: Use for top-level heading and : the most important element of a quality Web page.

375852

Comment by Markus

March 26, 2008 @ 3:12 pm

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 ;-)

376011

Comment by JamieO

March 26, 2008 @ 4:54 pm

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.

376078

Comment by Trevor Davis

March 26, 2008 @ 5:39 pm

I think it is only appropriate to wrap your logo in an h1 on the homepage. All other pages, the h1 should be the topic of the page.

376585

Comment by Phil Thompson

March 27, 2008 @ 2:00 am

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.

377280

Comment by parrfolio

March 27, 2008 @ 10:23 am

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.

377594

Comment by chovy

March 27, 2008 @ 1:57 pm

@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.

379467

Pingback by Choose the right heading-structure - but how? | bertdesign.de

March 28, 2008 @ 6:20 pm

[…] I read an answer from chovy.com which suggests to use the h1-tag for the specific topic of each […]

RSS feed for comments on this post. TrackBack URI