Objetivo: recomendar el uso del atributo title para facilitar información útil en un hiperenlace.
Todo comenzó con el elemento <img>. Esta etiqueta HTML siempre ha dispuesto, tradicionalmente, de un atributo, alt, en el que indicábamos información adicional que los navegadores mostraban en el caso de que, por la razón que fuera, no se llegara a cargar la imagen.
Este tipo de funcionalidad extra se ha demostrado muy útil en muchos más elementos, además de en <img>, hasta el punto de que un buen número de ellos dispone hoy día de un atributo, denominado title, para titular escuetamente la función del elemento. El texto que facilitemos a ese atributo podrá ser empleado por los navegadores a la hora de visualizar (o incluso escuchar) la página. Además, title suele gustar bastante a los robots que se dedican a escudriñar las páginas por la red, por lo que un uso adecuado puede ayudarte a mejorar el posicionamiento de tu página en un buscador.
El propio elemento <img> dispone también de un atributo title, pese a contar ya con alt. La diferencia entre ambos suele prestarse a confusión.
Nuestros potentes hiperenlaces con <a> no podían ser menos, de modo que en su colección de atributos permitidos incluyen también title.
Observa el siguiente código HTML:
Este es el <a href="http://elclubdelautodidacta.es/wp/indice-html/" title="Índice completo de la categoría HTML">índice completo</a> de artículos sobre HTML.
Este es su efecto:
Este es el índice completo de artículos sobre HTML.
Ahora, sin hacer clic sobre el enlace, posiciona simplemente el ratón sobre él. Verás que te aparece un texto emergente, junto al puntero, que reza Índice completo de la categoría HTML.
Interesante, ¿verdad? Ahora ya sabemos qué podemos esperarnos al otro lado antes de hacer clic en el enlace, algo que no siempre resulta obvio. Por ejemplo, fíjate en esto otro:
Para acceder al índice sobre HTML pulsa aquí.
Ignorando el texto previo, la palabra hiperenlazada («aquí») no guarda relación semántica con el destino del hiperenlace. Naturalmente, en la barra de estado nos aparecerá, normalmente la dirección a la que apunta, pero aún así puede no ser perfectamente explicativa. El atributo title identifica claramente el destino, como puedes comprobar dejando el ratón sobre el enlace.
De todos modos, procura evitar un uso como el anterior. Intenta, en la medida de lo posible, que el texto disparador del hiperenlace, el que aparece subrayado, que es el que colocamos entre las etiquetas <a> ... </a> guarde relación semántica con el destino, tal como hicimos en el primer ejemplo.
Y, por supuesto, utiliza title siempre.
Javier Montero Gabarró
El texto de este artículo se encuentra sometido a una licencia Creative Commons del tipo CC-BY-NC-ND (reconocimiento, no comercial, sin obra derivada, 3.0 unported)
El Club del Autodidacta
Índice completo de artículos relacionados con HTML.