Wrapping Logos with an H1 tag

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. Learn on Instapaper

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. It’s 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.

It’s easier to style any navigation lists or banner advertisements as well with a common parent ID “#head” using the element names as sub-selectors or make online Slides.

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