In designing Tutorial Dog, I had the logo as an image with the text included, but I want to have the words “Tutorial Dog” in the HTML with the h1 tag (ie. <h1>Tutorial Dog</h1>). Why would you want the h1 tag with text instead of an image? A visitor might see the image and the text in the image, but the Google bot (that crawls and indexes web sites) will look at the html file and won’t register the image like it would with text. This makes your site all the more search engine optimized. It will help you rank better in search engines and achieve more traffic.
This technique is relatively easy to implement once you get the hang of it. You’ll be able to use this technique for customize logos, navigation test and the overall design of the website.

In this case, I want to create a header tag with a link that is an image.

The HTML :

<h1><a href=”/”>Your text here</a></h1>

This is how the HTML should look regardless of if there is a CSS or not.

The CSS:

h1 a{
display: block; /* Allows you to change the width and height of the image */
height: (Image height here);
width: (Image width here);
text-indent: -2000em; /* Hides the text in the h1 tag */
text-decoration: none; /* Hides the underline of the hyperlink */
z-index: 1000; /* IE Fix*/
background: url(Your link here!) 0 0 no-repeat; /* The pathway to the image*/
}

You want to replace the height and width with the dimensions of the image. You can figure this out by getting info on the image you wish to place there. The background url links to the url of the image.
Reducing CSS Repeating
You can apply this trick to other parts of the website. For example, navigation is another good time to use this. This trick allows you to make the design better, while still conserving the search engine friendly html. So that you don’t have repetitive segments of the css, you can include multiple class and id styles in one block.

h1 a, #navigation li, #logo2{
display: block; /* Allows you to change the width and height of the image */
text-indent: -2000em; /* Hides the text in the h1 tag */
text-decoration: none; /* Hides the underline of the hyperlink */
z-index: 1000; /* IE Fix*/
}

This segment of CSS applies these attributes to each class or id named. To simply name multiple elements, use a comma to separate each element. With each element, now you only need to add the background image, height and width attributes.