What is the proper way to display a logo with CSS

Question

I've recently started learning CSS, and according to the tutorial series I'm watching, the ideal approach to display a logo image is to wrap the text in an H1 element, then set the CSS style for that tag to the background image, with a text-indent of -99999 or some large number.

This appears to be extremely clumsy and inelegant. It also appears that utilizing CSS to obscure text is a big no-no in terms of SEO (as hiding text via CSS is frowned upon).

I've also read that utilizing an image should be avoided because the logo isn't truly content and should be confined to the coding's design side (i.e. CSS).

What is the present state of opinion on this?

Answer 1

An <img> element is the proper way to show a logo. If you haven't studied logos and logotypes, you may be unaware that a logo has its own semantics and must be presented in a precise way. It may also have a necessary meaning, which should be specified in the [alt] attribute.

If the needed interpretation is a genuine heading on the page, adding it to a < h#> element is semantically correct.