Encabezados: Usabilidad

Ya he comentado un poco por encima en el artículo sobre Optimizar los encabezados, en qué consisten los encabezados y su utilidad para mejorar el posicionamiento de una página web o un blog.

Ahora entraremos en el verdadero fin para el que fueron diseñados los encabezados y como pueden hacer nuestra página web más usable e intuitiva para nuestros visitantes y como pueden facilitarnos la tarea de hacer una interfaz y un diseño atractivos.

En HTML

Como ya comenté en el otro artículo, los encabezados son unas etiquetas que proporciona HTML para delimitar trozos de texto que serán considerados como títulos de unos parrafos determinados de texto.

La jerarquía de encabezados va desde los encabezados <H1></H1> que serían los más importantes y más grandes, hasta el <H6></H6> que sería el más pequeño y menos importante, pasando por el <H2>, <H3>, <H4> y <H5>

Combinándolos con CSS

Está claro que al mantener una jerarquía en el código HTML donde los más importantes son los H1 y los menos importantes los H6, lo lógico sería que esa jerarquía la apreciaran los visitantes desde su navegador web.

Para ello disponemos de CSS y podemos crear estilos que asignen distintos tamaños para cada tipo de encabezado.

Aquí teneis un ejemplo del código que aparecería en la hoja de estilos:

h1 {
font-size: 1.5em;
}
h2 {
font-size: 1.2em;
}
h3, h4, h5, h6 {
font-size: 1em;
}

De esta forma podemos establecer distintos encabezados dentro de una misma página, cada uno con una importancia mayor o menor y haciendo referencia normalmente a un texto que irá tras éste.

Si queremos dar más o menos importancia a un encabezado, aumentando el tamaño o cambiando el color, basta con que cambiemos los parámetros del estilo del encabezado dentro de la hoja de estilos y ya cambiaremos las propiedades de los encabezados de las páginas a las que afecte dicha hoja de estilos.

Visitantes con problemas visuales

Los encabezados tambien son importantes para visitantes que tengan problemas visuales, para navegadores en modo texto que ignoren los estilos y para hacer páginas “para imprimir el artículo” en las que se debe ignorar el aspecto gráfico y puramente decorativo de nuestra web.

Podeis ver más consejos sobre usabilidad en la Guía de Usabilidad de este blog.

Compártelo

Si te ha gustado este artículo, envíalo a Meneame, Fresqui o Seoclon