Preferred Logo Display Method - html

Question

When displaying a company logo I saw something new today.
They set a height and width and overflow:hidden on the h1 tag and set a negative margin on the a tag inside of the h1 tag to keep the text from showing.
The code looked like this
<h1 class='logo'><a href='/'>Company Name</a></h1>
The css looked like this:
.logo {
text-indent: -9999em;
overflow: hidden;
text-align: left;
background-image: url(/images/logo.png);
background-repeat: no-repeat;
background-position: 0% 0%;
width: 253px;
height: 80px;
float: left;
margin-left: 10px;
}
.logo a {
display: block;
width: 253px;
height: 80px;
}
I always preferred the method where you use a span inside of the a tag and set it to display:none.
My code looks like this:
<h1 class='logo'><a href='/'><span>Company Name</span></a></h1>
My css looks like this:
.logo {
background: url(/images/logo.png) top left no-repeat;
margin-left: 10px;
a {
display: block;
width: 253px;
height: 80px;
span {
display:none;
}
}
}
Ignoring the fact that my nested CSS looks far cleaner, am I doing the right thing with my extra span and display:none or is there a reason for the crazy text-indent and other extra stuff the previous programmer threw into the stylesheet?
Edit for clarity: I am not asking for a different way to display the company logo. Using an h1 with the company name in it is an accepted standard practice for this. I guess I meant to ask what way do you prefer to display a company logo using an h1 and css? why?

Answer 1

Setting display: none will hide the content from screen readers and is thus a very bad approach.
Using the text-indent trick won't, but is still suboptimal.
The image is content and should be an <img> element.

Answer 2

You gave me an idea...
<style type="text/css">
#logo {
margin: 0;
}
#logo,
#logo a,
#logo:before {
display: block;
width: 275px;
height: 95px;
position: relative;
}
#logo a {
position: absolute;
top: 0;
left: 0;
line-height: -1px;
font-size: 0;
text-decoration: none;
overflow: hidden;
}
#logo:before {
content: "\0020";
background-image: url('http://www.google.com/intl/en_ALL/images/srpr/logo1w.png');
position: absolute;
}
</style>
<h3 id="logo">Google</h3>
This probably doesn't work on IE7, and Safari renders the text in the A tag as a little smudge in the top left corner. I bet it could be finessed a little more to eliminate that though. Maybe I'll be able to use this technique in the future.

Answer 3

i have using logo code..
.logo
{
width: 253px;
height: 80px;
float: left;
overflow: hidden;
margin:0px;
padding:0px;
}
.logo a
{
display:block;
cursor:pointer;
border:0px;
font-size:1px;
text-indent:-500px;
text-decoraton:none;
}
<h1 class="logo">company name
THanks
Ptiwari..

Answer 4

Either way you are trying to trick Google and can get penalized.
To answer your question, display:none means the text is not actually looked at on the page. The text indent means it is still there, spiders will still read the text, and therefore it can work.
Again, I consider this cheating the Search Engines and suggest against it. Use an Alt tag or find a place to put the h1 with a background image.