Semantically Including Logos in Web Pages

There’s an old phrase that sums up the essence and nature of a successful web site: “Content is king.” While this is undoubtedly a true concept that can be applied to other fields with the same rigor, it’d be fair to say that visual presentation should be the considered a site’s crown, particularly in a media like the web where an eye-catching user interface can increase visitor traffic.

Undeniably, high-quality content delivered in a polished way to the final user can help make a website look really professional. This naturally includes its most representative element: its logo.

It's definitely not my intention to discuss in depth the factors that turn a certain logo into a piece of artwork or an amateurish thing; that's out of the scope of this article, and there are literally tons of resources on the web that cover the topic more thoroughly. What do I want to discuss here is the different approaches that can be used for including logos in web pages without sacrificing its pristine, semantic meaning.

While at first sight the subject may seem quite boring, the truth is that learning how to semantically include logos in (X)HTML documents deserves a close analysis, taking into account the role that they play in the context of a web page.

The subject is not a mere subtlety, believe me. And if you don’t think the same, then do some research; you’ll be amazed at the number of websites that proudly display a nice, cool logo, which has been included using something as rough as a linked <img> tag. That's not a cardinal sin, but it’s close to one.

This doesn’t mean, though, that you have to make the same mistake, right? So, in this article series I’m going to explore different approaches that you can use to embed your beautifully-crafted logo into your web pages, while keeping its semantic meaning intact.

Are you eager to learn the full details of these techniques? Then start reading right now!