Home arrow Style Sheets arrow Using Span Tags to Include Logos in Web Pages

Using Span Tags to Include Logos in Web Pages

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.

Author Info:
By: Alejandro Gervasio
Rating: 3 stars3 stars3 stars3 stars3 stars / 2
April 20, 2010
  1. · Using Span Tags to Include Logos in Web Pages
  2. · Review: including a logo using a single H1 element
  3. · Using additional span tags
  4. · Adding some CSS styles to the sample web page

print this article

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.

So click on the link below and start reading!

blog comments powered by Disqus

- CSS Padding Overview
- CSS: Margins Overview
- Top CSS3 Button Tutorials
- More Top CSS3 Tutorials for Animation and Im...
- CSS Mega Menus: Adding Extra Sections
- CSS Mega Menus
- CSS3 Accordian Menu: Horizontally Display Hy...
- CSS Combinators: Working with Child Combinat...
- CSS Combinators: Using General Siblings
- Intro to CSS Combinators
- CSS Semicircles and Web Page Headers
- Drawing Circular Shapes with CSS3 and Border...
- More CSS Pagination Link Templates
- CSS Pagination Links
- Animated CSS3 Image Gallery: Advanced Transi...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials