Using A Logo As A Linked Header

XHTML Tags Illustration

Image Credit: Tom Morris

I’ve just modified the header for HTNet. During this process, I decided to use a logo as the main header (<h1>) for the pages throughout this web site.

Previously, I would have just linked the image directly and assuming that the search engines would be able to “read” the alt and title attributes that I’ve assigned to the image being used (in this case, it’s the logo).

I’ve read what must surely be a better way to do this in Anthony Baggett’s excellent post; Replace Your Blog Title with a Logo. Although he disclaims himself of being an SEO expert, I do feel that his method is in fact heading towards the right direction in that area.

However, I can’t help but think that surely there’s a better way to do this. This was what I set up to do yesterday.

What I find displeasing with Anthony’s method is that it uses an empty <span> to hold the logo image. So what’s the problem with this approach? Personally, I’m just uncomfortable with markup that doesn’t contribute anything to the content of a page. A tag that holds no data and is put in just to enable styling falls in this category.

So what’s my solution? If you browse the source of this page, you’ll see that my header section (which holds the logo) is as follows:

<div id="header">
<h1 id="logo"><a href="" title="HTNet - A Notepad of Tech, Business, Science and Self Improvement">HTNet - A Notepad of Tech, Business, Science and Self Improvement</a></h1>
</div><!-- #header -->

It’s just a simple combination of one <div> tag, one <h1> tag and a hyperlink (<a> tag). More importantly, there’s no additional markup put in just for cosmetic purposes.

What about the logo bit? Glad you asked! The logo is definitely for cosmetic purposes, therefore it should go into the CSS. One problem I had to overcome was how to keep the descriptive text out of the way visually and just play it’s role in the background.

In my previous attempts at solving this problem, I futilely tried to make use of the display CSS property. When that failed I experimented with the visibility property which led to even more frustrations.

After reading up more on this particular problem, it was apparent that I was so obsessed on hiding the textual data that I totally overlook an alternative but equally effective method: just get it out of the way!

To do this, I just need to play with the margin property of my <h1>‘s textual data without it impacting the block level positioning. The solution is CSS’ text-indent property. Just set this to a significant negative value and your text data will be totally out of the way yet preserving the defined size and positioning of its container.

So here’s what the relevant CSS for my header section is like:

#header {
background-color: #333333;
height: 150px;
background-image: url('images/headerbg.jpg');
background-repeat: no-repeat;
background-position: center center;

#logo {
margin: 0 0 0 10px;
padding: 0;
float: left;
width: 300px;
height: 120px;
background: url("images/logo.png") 0 0 no-repeat; /* This places the logo image as a background */
text-indent: -10000px; /* This moves the text out of the way */

#logo a {
display: block;
width: 300px;
height: 120px;
border: none;

#logo a:hover { border:none; }

By applying the method described above, I believe that I have finally solved the image as a linked header with SEO juice retained problem. Of course, this is just my opinion… and if you have a better method of achieving this using valid and clean XHTML + CSS by all means please comment below. I’m always open to learning better ways of doing things and I’m sure other visitors would appreciate your contribution as well.