For this tutorial you will need to have a basic understanding of XHTML and CSS.

First comes the HTML. Generally your logo is nested in the header like this.

<!--HTML Code-->
<div id="header">
<a href="home"><img src="yourlogo.jpg" alt="COMPANY NAME" /></a>
</div>


To make this more accessible and for it to degrade gracefully we really want to eliminate the “img” element and in turn use a text elements like this

<!--HTML Code-->
<div id="header">
<h1><a href="home.htm">YOU COMPANY NAME AND ANYTHING ELSE</a>
</div>


In the above case if a user views the page un-styled they will simply see an H1 header link with the name of your company and any other text you place inside. This allows search engines to read the actual logo in plain text and assign this text an important value (first H1 elements are seen as important). It also improves mobile device structure as many of them don’t like images.

Now we can use CSS to make the image based logo appear where we want it and more importantly how we want it (image). We only need to style two elements, the ‘H1′ and ‘a’ tags.

/*CSS Code*/
#header h1{
width:auto;
height:auto;
text-indent:-9000px; /*This removes the text from the screen*/
}
#header h1 a{
width:300px;
height:100px;
background:transparent url('path/to/your/image.jpg');
display:block; /*This is critical*/
}


In the ‘H1′ element you will notice that we gave it a text-indent of -9000px. This moves the the text far enough off the left side of the page that even with the largest monitor it is not visible. By doing this we ensure that pesky text doesn’t sit on top of our beautiful logo.

The next unusual piece you will find in the CSS is under the ‘a’ element. “Display:block;” renders the ‘a’ element as a block level element allowing it to have a fixed width and height.

Now you have a beautiful logo that degrades seamlessly and is extremely accessible both to humans and search engines.

Very handy, check it out

read more | digg story