Ya sea por una cuestión de SEO o al estar diseñando un tema, en muchas ocasiones necesitamos ocultar contenido. Con CSS podemos hacerlo fácilmente, solo es necesario colocar un display: none al estilo del div en cuestión.
Veamos un ejemplo sobre cómo hacer que una etiqueta h1 contenga una imagen y así hacer valido el documento HTML y ayudar a posicionar palabras clave.
Código HTML:
<h1 id="logo"><a href="http://ejemplo.com/" ><span>TEXTO A POSICIONAR</span></a></h1> |
Código CSS:
#logo > a{
display: block;
width: 100px; /* ancho del logo */
height: 100px; /* alto de logo */
background: url(http://ejemplo.com/logo.png);
}
#logo > a > span{
display: none;
} |
Lo que hicimos fue ocultar la etiqueta ‘span’ y a la etiqueta ‘a’ darle un ancho, un alto y colocarle de fondo la imagen que queremos en este caso. Si bien puse una url de ejemplo, sería un logo. Esta práctica es la que utilizan la mayoría de las webs, las que no lo hacen de manera similar o de forma incorrecta.