Rendered header image. Semantically, should I use img tags or a background?

Just a question on making good html. Say I have a header.

<h1>Header</h1>
<p>Hello, World!</p>

This is the typical use, but say I have the header as a stylized text image. Would I use an <img/> tag with an alt text? Except, this does not seem to me to be correct as it isn't the image which is important as it is the text it is rendering. The only pro to using <img/> is the alt attribute. Is there a way to having the <h1> tag with a background image, but u开发者_如何转开发sing CSS have the text within the <h1> disappear, and still be semantically correct? I.e., I want the HTML to show the above, but when you add css the content of the <h1> disappears and the background-image takes over.

Input, comments, words of wisdom?

CSS3 extends the color value to include the ‘transparent’ keyword to allow its use with all properties that accept a value.

You can use color: transparent with CSS3 to hide the text and then render your stylized header image as a background-image.

However, to work with CSS2, it's best to use <img> with both a title attribute and alt:

The ALT attribute is designed to be an alternative text description for images. ALT text displays before the image is loaded (if it's loaded at all) in the major browsers and instead of the image in text-based browsers like Lynx.

In contrast, you can use the TITLE attribute for just about any page element, but it isn't required for any page element. Use it to describe links, tables, individual table rows, and other structural HTML elements. They're more versatile than the ALT attribute and many search engine ranking algorithms read the text in TITLE attributes as regular page content.

I would like to add that there's not a definite answer. Everybody has it's own interpretation and opinion on this matter, and there is no "golden rule" on this one. However, try to look at some other websites and learn from them.

h1{
background:url("bg.png") no-repeat;
width:"some value";
height:"some value";
text-indent:-9999px;
}

Use this CSS for your H1 tag.

There is, actually, sort of a "golden rule" about this, since at least 2010:

If possible, it’s still best to avoid techniques such as “text-indent:-9999px” or “margin:-4000px” or “left:-2000em”.

Google has top-secret algorithms designed to detect when text is hidden/positioned off screen. If this type of hidden text is detected, our important red phone rings, and this becomes one of the signals that may cause us to believe your site is deceptive.

http://maileohye.com/html-text-indent-not-messing-up-your-rankings/

They mentioned Towel Day, so you know it's legit.

It's best to use a semantic image tag with alt text in your h1 tag.

I would vote for using CSS to mask the text in h1 with an image, how you would do it a different question altogether. You can use images in H1 but that will offend purists on SO. Can you somehow use a font api such as http://code.google.com/apis/webfonts/ to display fancy typography and make semantics nazis happy?

I would do <h1><img src="..." alt="..." /></h1>. It semantically describes that it's a heading and gives the user an image with an alt text. Alternatively but equally as valid you could have text as the h1 and hide it with css and give it a background image.