Estilo y estructura de enlaces con XHTML y CSS

En este artículo nos enfocamos en el estudio del Hipertexto (enlaces de texto), definiendo como estructurarlos y darles un diseño estético.

Hasta el momento hemos logrado analizar el diseño y estructura de los textos en nuestro documento XHTML, ahora iremos un poco más adelante y nos adentraremos en el estudio del hipertexto y sus máximos representantes, los enlaces o links.

El uso del hipertexto representa un método enfocado a proporcionar al usuario la capacidad de moverse de un sitio a otro al seleccionar elementos de enlace. El potencial de estos elementos le da al internet la capacidad de estar entrelazado, lo que le proporciona un alto grado de relevancia e importancia a esta clase de etiquetas dentro del lenguaje de marcado.

Elementos de anclaje

A diferencia de lo que la lógica pueda dar a entender, la etiqueta “link” no es la encargada de crear los enlaces en HTML. Como ya se mencionó en otras ocasiones, la etiqueta “a” que esta relacionada con anclajes, es quien establecerá los vínculos.

El simple hecho de crear un link no representa mayor reto, basta con envolver una cadena de texto con una etiqueta “a” de apertura y su contraparte de clausura, especificando la dirección de destino dentro del atributo “href” de la etiqueta, como se muestra en el ejemplo:

<a href="https://www.lawebera.es">La Webera</a>

El enlace se logra mediante una referencia de hipertexto, la cual es establecida gracias al atributo “href”, cuya función es contener el valor que se encargará de indicar al navegador la ruta hacia donde tiene que apuntar.

Esto no significa que los anclajes únicamente puedan redireccionar a otra página o a un sitio externo, por el contrario su función original consiste en establecer enlaces con partes internas de un documento, es decir, existe la posibilidad de utilizarlos como guía o puente entre partes de un texto o elementos que componen la misma página.

Para poder lograr esto basta con agregar el signo “#” antes de un fragmento de referencia, el cual puede ser un nombre o identificador del elemento al que queremos dirigirnos, y todo esto irá dentro del atributo “href”. En la actualidad los ID son los indicados para ser utilizados como referencia al momento de indicar una dirección interna, pero vale mencionar que en el pasado el nombre definido con el atributo “name” era lo más utilizado.

En base esto, podemos definir que para establecer un enlace interno hacia un elemento de capa cuyo identificador es “capaPrincipal”, podemos escribir un código como el siguiente:

<a href="#capaPrincipal">Principal</a>

<div id="capaPrincipal">Descripción principal de la página</div>

Con estos links internos se nos permitirá recorrer el documento de una parte a otra sin necesidad de usar las barras desplazadoras, siendo utilizados principalmente para crear una clase de índice.

También podemos aplicar esta funcionalidad para dirigir a partes específicas en sitios externos, por ejemplo si el sitio que vamos a visitar tiene una sección que lleva por ID “capaPrincipalExterna”, podemos estructurar nuestro enlace de la siguiente manera:

<a href="index.html#capaPrincipalExterna">La Webera</a>

Estados de los enlaces

Existen cinco estados por los que un enlace puede pasar, nos estamos refiriendo al estado inicial, visitado, con el puntero encima, enfocado y activo. Con frecuencia dichos estados son utilizados para definir estilos únicos y distintos mediante CSS, y de esa manera asegurar que el usuario pueda identificar los links que han sido utilizados.

El primer estado es aquel en el que se encuentra el link que no ha sido visitado, el segundo es identificado por la palabra “visited” y se presenta cuando el enlace fue visitado, el tercero es “hover” y es cuando el puntero del mouse se encuentra sobre el link, después viene “focus” que es cuando el documento se enfoca sobre el link como cuando utilizamos la tecla tab para recorrerlo, y finalmente tenemos “active” que es cuando el link se encuentra seleccionado.

Por defecto los navegadores sólo toman en cuenta tres estados, los enlaces no visitados son colocados en color azul, los visitados en morado y los activos en rojo. Esto no añade estética al sitio, por lo que es común rediseñar su aspecto recurriendo a CSS.

Si utilizamos la etiqueta “a” como selector dentro de nuestro código CSS, entonces definiremos un estilo único para todos los cinco estados, lo cual es una práctica común si no queremos complicarnos la vida o simplemente así lo amerita el diseño. Pero si lo que queremos es manejar de manera independiente cada estado, debemos hacer uso de pseudo-clases, las cuales se llaman poniendo el signo de dos puntos “:” entre la etiqueta “a” y alguna de los estados mencionados, los cuales llevarán por nombre las palabras que se mencionaron en el párrafo anterior.

Supongamos que queremos definir que los links visitados sean de color naranja, en vez del morado por defecto, entonces simplemente haríamos algo como esto:

a:visited { color: orange; }

Y si quisiéramos definir los cinco estados por separado, basta con incluir el siguiente código:

a:link { color: blue; }
a:visited { color: purple; }
a:hover { color: orange; }
a:focus { color: yellow; }
a:active { color: red; }

Para el estado normal del link, es común utilizar un color que vaya acorde al resto del sitio, un color que combine pero que permita identificar rápidamente los enlaces. Es necesario respetar el subrayado del texto, ya que aunque puede lucir estético el removerla, esto puede confundir a los usuarios e incluso resultar un impedimento para aquellos que no puedan distinguir una diferencia de color.

Por su parte el estado “visited” es cada vez menos recurrido para ser diferenciado, muchas veces se opta por utilizar el mismo color de letra que en el estado normal, todo para no estropear el diseño general del sitio. Si deseas apegarte a lo clásico puedes optar por un color un poco más claro que el color normal para que así el usuario pueda identificar los links ya visitados, y al mismo tiempo no estropear el diseño.

El estado “hover” entra en acción cuando ponemos el cursor sobre el enlace, esto lo ha convertido en uno de los más populares al momento de diseñar. Esta transición puede resultar muy útil para resaltar, por lo que los diseñadores generalmente hacen el cambio más radical de color en este estado, o incluso hacen algunos cambios como la omisión de decoración en las letras, por lo que común ver que en un código CSS se haga lo siguiente:

a:hover{ text-decoration: none; }

Mientras que “hover” resulta muy popular, “focus” no lo es tanto, este estado ha sido relegado por la falta de uso de la tecla tab, por lo que muchos le consideran la menos útil de todas las pseudo clases de links, la cual incluso no es compatible con Internet Explorer.

Finalmente el estado activo es ideal para dar un estilo que deseamos se muestre al momento de dar click en un enlace, también puede ser utilizado para dar una pequeña retroalimentación o respuesta al usuario.

Accesibilidad de los enlaces

Además de los estados, una cosa que debemos tener muy en cuenta al momento de estructurar enlaces, es la accesibilidad a ellos. Es importante prestar especial atención a la accesibilidad de los enlaces para asegurarse de que todos puedan utilizar las páginas web de manera eficaz, incluso si no usan dispositivos de señalización o si utilizan navegadores no visuales.

La tabulación es uno de estos aspectos a considerar, la medida en que lo tomes dependerá del mercado al que tu sitio vaya dirigido. Muchos usuarios no utilizan dispositivos de señalización, ya sea por decisión propia o por necesidad, si utilizamos un teclado para desplazarnos a través del sitio debemos garantizar que este nos guiará de manera adecuada.

Para establecer de forma explícita el orden de tabulación de los enlaces en una página, podemos utilizar el atributo “tabindex”, el cual tendrá como valor números que indicarán el orden de los vínculos, siendo 1 el primero.

<a href="index.html" tabindex="1">Inicio</ a>

Es posible que también desees hacer esto si crees que existen algunos enlaces que son de mayor importancia o interés para el usuario que otros, por lo tanto querrás hacer el proceso más centrado en ello.

Otro aspecto a considerar con las teclas de acceso, las cuales nos permiten llegar a links simplemente con introducirlas con el teclado. Estos atajos del teclado, remueven la necesidad de tabular hasta llegar al vínculo que deseamos, y para aplicarlos basta con realizar lo siguiente:

<a href=”index.html” accesskey=”i”>Inicio</a>

El atributo “accesskey” indicará la letra o combinación de letras que debemos utilizar para accesar al link, en el caso del ejemplo bastará con escribir Ctrl o Alt (dependiendo del navegador) seguido de i para que nos lleve a la posición del link de inicio.

Muchas veces es imposible tener una clave de acceso para todos los links, por lo que sugerimos añadir esto únicamente a los más importantes, o que más demanden su uso.