Psycho Fox

Headers such as h1 tags are an important process for your webpage. It is also necessary if you want to be coding towards correct web semantics. People with sight problems may use screenreaders which will scan your webpage and look for headers to lead them.

Whatever it is - it is important to use the correct markup wherever possible and a header should use a header tag.

But what if you want something more attractive than standard large web text? There are certain scripts available such as sIFR, which uses a holding .swf file and converts your header text into any embedded font  while still being search engine friendly.

There are other instances where you will want to use a graphic rather than text. Rather than using the <img> tag which has no header attributes try this trick which will benefit both worlds.

CSS code:

h1 {
font: 1.2em/1em verdana;
position: relative;
background: url(http://www.google.co.uk/intl/en_uk/images/logo.gif) no-repeat;
width: 276px;
height: 110px;
}

h1 span {
position: absolute;
top: -2000px;
left: -2000px
}

HTML code:

<h1><span>Google!</span></h1>

The benefits of this is that you still have your text in the background and is much more noticeable if you turn your css off. It is more powerful than using an alt tag too.