Chovy's Blog

Web Development with Node.js, PHP, Javascript, and HTML5

By

Wrapping Logos with an H1 tag

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:

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.

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.

  • http://www.optocoupler.org Amelia Gray

    i was wondering if there are webmasters who manages several thousand websites at a time.*’~

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

  • http://www.chovy.com chovy

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

  • http://www.parrfolio.com parrfolio

    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.

  • http://imgiseverything.co.uk Phil Thompson

    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.

  • http://trevordavis.net/ Trevor Davis

    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.

  • http://www.oastler.ca JamieO

    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.

  • http://www.bertdesign.de Markus

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

  • Kirk Franklin