Best practice for brand logo on websites

Question

I have to make a microsite and I want to know the best method of using a logo in the HTML template. (Ignore the fact this is invalid code, its just arbitrary waffle if I use alt="" for example.)

Option 1:

<a href="#">
   <img src="logo.gif" /> 
</a>

Option 2:

<h1>
   <a href="#">
      <img src="logo.gif" /> 
   </a>
</h1>

Option 3:

<h1>
   <a href="#">
   </a>
</h1>

h1{background: url(logo.gif);}
h1 a{height: #px; width: #px;}

Option 4:

Is using h1, h2 or h3 better for SEO, as I understand that repetitive h1's are a bad idea and the company brand is NOT the main subject for every page on it's website?

What I normally use is Option 3, like this:

<h2>
   <span>Company name</span>
   <a href="#">
   </a>
</h2>

h2{height: #px; width: #px; background: url(logo.gif);}
h2 a{display: block; height: #px; width: #px;}
h2 a span{display: none;}

Answer 1

I usually use option three, but that has one downside: if CSS isn't loaded the company logo isn't visible either. I think the logo is one of the images that should be present on a website at any time, even with no css, because it's a very important part of the brand. Therefor I think it's semantically most correct to use an <img> for the logo. It is an image important in the page's contents, not just a part of the style.

My favorite option (I should use it more) is to have the logo image with an alt text separarely from the heading. In the <h1> I put the name of the brand again, or if it's not the homepage I'll put it in a regular div and use <h1> for the actual page title. Usually it can't hurt in terms of design to use both logo and the name as a title.

About option 4: it depends on which version of HTML you use because HTML5 allows multiple h1's. I've added a question to Google's moderator questions about the SEO implications of this which I hope Matt Cutts will answer in his next round of videos.

Answer 2

In HTML5 (if your header contains only your logo and tagline/motto) id do this:

<header role="banner">
<a href="#"> 
   <img src="logo.gif" alt="Waffle Inc." />  
</a> 
</header>