Tras no pocas divagaciones voy a comentar la técnica que he ido evolucionando y que últimamente estoy empleando para marcar el encabezamiento principal de algunos sitios web.
En este método tengo en cuenta los siguientes elementos:
- Título
- Logo / imagen
- Tagline (línea de etiquetas, descripción corta)
<h1 id="logo">
<img src="logo.gif" alt="titulo" />
<span id="tagline">descripción corta</span>
</h1>
Hace años era algo prácticamente necesario el que un encabezado principal tuviera texto plano, evidentemente por razones semánticas y de posicionamiento en buscadores. Hoy en día me atrevería a decir que los diferentes motores de búsqueda ya contemplan el logo (gráfico) dentro de un h1 como algo totalmente habitual, dándole la importancia que se merece al texto alternativo de esta imagen.
Con ello podemos ya ahorrarnos técnicas que sitúan al logo como background por medio de CSS y un text-indent para esconder el titulo real.
h1 {
text-indent: -9999px
background: url(logo.gif) transparent no-repeat;
}
Acerca del título como logo
Vale, de acuerdo! el texto es más importante y la esencia de los motores de búsqueda. Pero creo que la web ha evolucionado y se ha convertido en el medio multimedia (valga la redundancia) por excelencia y con ella también han evolucionado los buscadores.
El logo o imagen de una empresa es su marca (con todo lo que esto conlleva), es un elemento corporativo de gran relevancia y en muchos casos no se trata de un elemento meramente decorativo.
Pienso que la etiqueta img le da la importancia que se merece y su texto alternativo le aporta la semántica suficiente.
Acerca del tagline
Semánticamente lo primero que a uno se le pasa por la cabeza para etiquetar el tagline es situarlo como el segundo encabezado, algo totalmente correcto aunque tiene sus inconveniente.
- Al situar la descripción corta del sitio web como segundo encabezado pienso que se «pierde» (levemente) un encabezado, aportando cierta redundancia a la descripción del encabezado 1.
- Por otro lado si se trata de un blog, los buscadores verán los títulos de cada post en el nivel de encabezado
h3, lo cual es de imaginar que es menos relevante que otros blogs con los mismos títulos de posts bajo un nivelh2.
Lo que propongo entonces es situar el tagline dentro del encabezado h1, esto además compensaría el volumen de texto plano que figura en el encabezado principal.
He marcado el tagline dentro de un span para aplicarle el estilo necesario.
#tagline {
display: block;
font: 700 .8em Verdana, Helvetica, sans-serif;
}
Bueno, en definitiva se trata de otro método. Todas las técnicas tienen sus pros y contras, lo interesante es su debate y sobre todo decantarnos por la que mejor se ajuste a cada sitio web.
