Corrosive Online
- Web Design
- Graphic Design
- Articles
- Tutorials
- Downloads
Tutorials
Using Images and Text for Headers in a Website
Sometimes you may want to use non-standard fonts for headers on your website. This is a simple method for making sure that Search Engines and users with screen readers also have some text to read. We know that h1 is the most important Tag on a web page as it tells the Search Engine what the page is about. Sometimes though, you may want to use an image instead of text. All you need to do is to use an image replacement technique. The CSS looks like this;
h1 {text-indent: -9999px; background-image: url(images/title.gif);}
Then you put the h1 into your design and make sure that there is the same text that is in the 'title.gif' image in the h1 Tag. For example;
<h1>This page is about website design</h1>
The text indent -9999px in the CSS makes sure that the HTML text is well hidden from the viewer (-9999px off the screen) yet will be picked up by Search Engines and screen readers. The viewer will just see the background image as you intended. Simple eh? You can develop this technique further if you wish but this should give you the starting blocks to successfuly satisfying both viewers and Search Engines.
