Semantically correct website logos

How to mark up your website logo has always been a really controversial topic on the web. There are literally hundreds of articles about the topic and, well, this is another one.

Over the past year we've changed our approach to this extremely boring (but important) subject 3 times. Below I will hit on each one and follow up with how we're doing it now - which in my opinion is the "right" way.

H1 Image Overlay

This approach seems right; throw an anchor in your H1 with your company name written inside of it, hide the text with CSS and show the logo. Secondary page titles start with H2 and make their way down, etc.

The HTML

<h1>
 <a href="#" title="Company Name">Company Name</a>
</h1>

The CSS

h1 {
 text-indent: -9999em;
}

h1, h1 a {
 height: 50px;
 width: 230px;
}

h1 a {
 background: url("logo.png") no-repeat;
 display: block;
}

Problems with this approach

1. We're hiding text, which is tedious and could possibly hurt search rankings… though I have no idea if it really does or not. I'll be safe.
2. Our Secondary page titles shouldn't be H2's, they should be H1's.

After researching a little bit I eventually found this . The video basically says to use alt, not css, so thats what we started doing.

H1 w/ Image in the markup

According to our friends at Google, this approach is "better". You simply put an image tag inside of your H1 and put your company name in the images alt tag. But still, secondary pages start with H2.

<h1>
 <a href="#" title="Company Name">
  <img src="logo.png" width="" height="" alt="Company name">
 </a>
</h1>

After sticking around here for a while, and still not being satisfied, I came across a comment #47 on 456 Berea Streets article, Headings, heading hierarchy, and document outlines. Perfect!

The "right" way to markup your website logo

Homepage Logo

<h1>
 <a href="#" title="Company Name">
  <img src="logo.png" width="" height="" alt="Company name">
 </a>
</h1>

Secondary page Logo

<p>
 <strong>
  <a href="#" title="Company Name">
   <img src="logo.png" width="" height="" alt="Company name">
  </a>
 </strong>
</p>

If your website was a book, the homepage would be its cover. The secondary pages are the books chapters and the H1 should be used for the "chapter titles", not the "book's title".

So, that's our approach. I know there are a million approaches out there but in my opinion this is the "best" way to semantically markup your websites logo.