Using Span Tags to Include Logos in Web Pages

It’s hard to believe, but numerous web designers think that displaying a logo on a web page is pretty similar to including ordinary images using <img> elements. This is a common mistake, often because some people don’t think of a logo as a graphical representation of the name of the web page.

It’s not my intention here, however, to sound pedantic or even play a judging role, since I’ve been guilty of making the same mistake in the past when I was trying to improve my web development/design skills (which I’m still trying to do, of course). Instead, I’d like to be pragmatic and show you how a proper combination of CSS and a few HTML elements can be of great help when including logos on web pages without breaking up the semantics of the structural markup.

To achieve that goal, in previous tutorials of this series I implemented some straightforward methods that allowed you to semantically embed a sample logo into a basic (X)HTML document using something as trivial as a wrapping div and an H1 element. I left off the last article demonstrating that this task can be performed by utilizing only a single H1 tag without having to use an extra container.

While it’s fair to say that this last approach is effective and easy to implement as well, it has a minor drawback worth noting here: if the logo isn’t properly downloaded by the browser, the underlying text will remain hidden from view. This is a typical issue suffered by most image replacement methods, which fortunately can be solved by using a couple of additional <span> tags.

In this last episode of the series I’m going to demonstrate how to include a logo on a web page using a single H1 element, but in this case the text wrapped by the element will remain visible even if the logo isn’t displayed on screen.

So click on the link below and start reading!