Simpre ha sido la mejor opción para los encabezados el usar texto en lugar de imágenes, y si necesitas poner una imagen la mejor opción es utlizar esa imagen de fondo y ocultar en texto dentro de un div. Esta técnica es muy útil sobre todo para lectores de pantalla y optimización en motores de búsqueda y que en realidad se está utilizando texto.
Ejemplo, tenemos nuestro HTML para el encabezado principal así:
<h1><span>Encabezado principal</span></h1>
Y nuestro CSS debe estar de la siguiente manera
h1 {
background: url(imagen-de-encabezado.gif) no-repeat;
}
h1 span {
position:absolute;
text-indent: -5000px;
}Cómo puedes ver estamos utilizando HTML regular para las etiquetas h1 y por medio del CSS lo estamos reemplazando por una imagen. Al texto lo mandamos hasta la derecha a -5000 pixeles.
7 Comentarios (Agrega el tuyo)
Perdón por la intromisión pero eso se puede optimizar así:
XHTML:
Encabezado principal
CSS:
h1 {
background: url(imagen-de-encabezado.gif) no-repeat;
text-indent: -5000px;
}
¿O es que existe alguna razón para añadir la etiqueta ?
Uh! me borro las etiquetas así que vuelvo a mandar el comentario para que se entienda…
Perdón por la intromisión pero eso se puede optimizar así:
XHTML:
<h1>Encabezado principal</h1>
CSS:
h1 {
background: url(imagen-de-encabezado.gif) no-repeat;
text-indent: -5000px;
}
¿O es que existe alguna razón para añadir la etiqueta </span>?
Hola, si existe un problema y es que Internet Explorer 5.5 y anteriores no muestran el fondo por eso es necesario separarlo en 2 etiquetas, puedes probarlo en varias versiones de Internet explorer bajandolos desde aquí http://browsers.evolt.org/?ie/32bit/standalone
hola gracias por la invitacion pero ahora me pide el mail de la persona que me invito y no tengo tu mail, me lo regalas pliss
gracias
sugiero ver: http://www.php-hispano.net/archivos-tmp/130
Hola Carlos,
Me comentó un compañero que esta práctica puede ser penalizada por un agente humano en el caso de que los contenidos de la imagen colocada no se correspondan con el texto reemplazado.
Gracias por tu blog,
David
hola se que no es el tema pero necesito ayuda quisiera cambiar el color de de fondo de una celda de tabla por una imagen cuando el cursosr se pocisione sobre la celda, por favor que alguien me ayude.