Welcome to the conclusion of a four-part series that shows you how to semantically include logos in web pages. In this part, you'll learn how to use additional span tags to include a logo in a web page without causing problems with the semantics of the page's structural markup.
Using Span Tags to Include Logos in Web Pages (Page 1 of 4 )
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.