Creative h1 and h2 tags?

Hi David

You could use a style sheet to assign an image to the H1 tag.

Bill

Hi,

For example, use the <h1> tag for the titles of the most important images and <h2> for the lesser ones.

Regards,

Mike

You cant asign a heading as alt text but you dont need to. Use your headings as you normally would and then in your stylesheet do this:


h1 {
display:block;
width:500px; /* this is the width of the image you want to use as your h1 */
height:100px; /* this is the height of your image */
background:#fff url(images/your-image.jpg) no-repeat top;
text-indent: -9999px; /* this hides the text and shows your image instead*/
}


This has the advantage of letting you use whatever image you want as your heading text and still being accessible and semantic to search engines and people using assistive technology.

This technique is not risky at all. You are simply making your site more accessible. Just make sure that the text you replace with the image is the same as the text in the image.

Hope this helps.

You can also put an image tag directly into an <h1> (or whatever heading you like) tag. Although I usually do things the way wardo describes above (though display: block; is not needed, an <h1> is already a block-level element), something like this is also perfectly fine:
Note the use of alt text. Besides being a required attribute according to the WC3, this is the only way to give a heading used this way a text value, which is important for communicating with image-disabled browsers (like the Google spider).

No spiders dont read css but you dont need them to. Your headings will be in the html not the css. The css just hides them and replaces them with an image.