Search code examples
htmlcsssemantic-markup

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 using 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?


Solution

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

    Use this CSS for your H1 tag.