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

Question

I've been learning CSS recently, and the tutorial series I'm watching says the best way to display a logo image is to wrap the text in an H1 tag, then set the CSS style for that tag to background image, with a text indent of -99999 or similarly large number.

This seems incredibly hackish and inelegant. It also seems like using CSS to hide text would be a big no-no for SEO purposes (as hiding text via CSS is frowned upon).

I've also read that using an img should be avoided, as the logo itself is not really content, so should be relegated to the design-side of the coding (i.e. CSS).

What is the current consensus on this?

Answer 1

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