What is the proper way to display a logo with CSS?

I always just wrap an anchor tag around an image:

<a href=""><img src=""></a>

or create the anchor tag as a block and set a background image

<a class="logo" href="">Logo</a>

.logo { 
         background: url("/path") no-repeat; 
         width: 100px; 
         height: 100px; 
         display: block; 
         text-indent: -9999px;
}

The correct way to display a Logo is with an <img> element. If you haven't studied logos and logotype, you might not realize that a logo has its own semantics and is required to be presented in a very specific manner. It may also have a required interpretation, which is what should be used in the [alt] attribute.

If that required interpretation is legitimately a heading in the page, it would be semantically correct to add it to a <h#> element:

<h1>
    <img src="logo.png" alt="Foo Co.: Where everyone can fizz the buzz" />
</h1>

Typically the logo is used as a link, so it's common to see:

<a href="/">
    <img src="logo.png"... />
</a>

Additionally the logo can be emphasized (could be either <strong> or <em> depending on degree):

<strong>
    <a href="/">
        <img src="logo.png" ... />
    </a>
</strong>

---

To understand the semantics of a logo. If you're referencing the Coca-cola company, the logo for the brand would not, and should not change if you swapped out, or removed a stylesheet. Most people understand that semantically,

is different from