Al maquetar una web es muy frecuente usar imágenes para mostrar encabezados que deben tener un diseño definido y que con simple texto no se podrían presentar. Queda muy estético, es cierto, pero si usamos etiquetas como h1, éstas pierden todo el significado ya que no aportarían información a los robots de búsqueda.
Si queremos que los buscadores vean un encabezado h1 con texto y nuestros usuarios un h1 con una imagen bien diseñada, la solución la encontramos usando CSS. Basta con definir el texto dentro de una etiqueta y mediante estilos reemplazamos este texto por una imagen definida en nuestra hoja de estilos.
En realidad no es un reemplazo, sólo estamos mandando el texto hasta la derecha y colocándolo al fondo de las capas de nuestro documento, por lo cual un usuario con CSS activado no vería el texto y si la imagen.
El código HTML quedaría así:
<h1><span>Tu texto</span></h1>
Y el código CSS necesario:
h1{
background: url(imagen.png) no-repeat;
}
h1 span {
position:absolute;
text-indent: -10000px;
}