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; 
}