Invisible h1?

[DavidO]

For design reasons I've replaced my h1 text header with a graphic. It says the same thing but now I have no h1 tag!

Is it legit to use invisible text (display: none) in this case? I understand that some uses for invisible text are allowed. In fact, I've read specifically that invisible h2's are allowed but I can't find any reference to h1.

I've put my usual h1 text in the alt tag but this is surely not as valuable as an h1. Can I place the entire image and alt text in h1 tags?

Thanks for any suggestions. I need to be really careful with this.

[dburk]

Hi DavidO,

I usually use:

 
h1 { text-indent: -9999px; }

Seems to work all right.

You can also leave the text in place, wrap your image in a div and use negative magins and z-index to position it over the text.

[fwblack]

If you're using an image tag to display your image, put your text in the alt parameter of the image tag... that will help. If you're using a background image in a cell or div you can't do that and I'd place the text in a paragraph or hx tag somewhere else on the page.

I would not make it invisible or place it way off the page. Putting it in a layer div under the image would also work, but probably no better than making use of the alt parameter in the image tag.

I use an image header on several sites with the alt parameter containing the text in the image header, on some sites I also have a h2 tag with the title just below the image. Works well either way.

Fred