HTML – Hiperenlaces titulados

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ó


HTML – Hiperenlaces titulados


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.

Imágenes en HTML – III: Un texto alternativo

Hagamos balance de la situación: ya sabemos referenciar imágenes en nuestra página web con el elemento <img> y el atributo src, así como la conveniencia de indicar su tamaño para facilitar el trabajo al navegador.

Hay ocasiones en las que, por determinadas circunstancias, no se descargan las imágenes. Quizás apunten a un fichero inexistente, o puede que hayamos desactivado su descarga para agilizar la carga de la página. O tal vez estemos empleando un navegador en modo texto como Lynx. En esos casos sería muy práctico, a pesar de todo, poder hacernos una idea de cuál es el contenido de la imagen.

Para ello disponemos del atributo alt, al que le facilitamos, entre comillas, un breve texto alternativo describiendo la imagen.

Por ejemplo, he aquí la oveja experta:

<img src="expertahtml.jpg" alt="La oveja experta en HTML" height="283" width="213" />

El texto alternativo indicado en alt aparecerá en el caso de que no se llegue a cargar la imagen.

En algunos navegadores antiguos ese texto se mostraba incluso en imágenes cargadas cuando situábamos el ratón encima de ellas, pero debes saber que eso no es lo que determina la especificación.

Acostúmbrate a usar siempre el atributo alt cuando trates con imágenes. No sólo harás tu página más funcional, sino que, además, será mejor valorada por los buscadores. De hecho, si quieres escribir código XHTML estricto, se trata de una exigencia absoluta.

Naturalmente, hay situaciones en las que no es deseable facilitar un texto alternativo. Si tienes gráficos asociados al diseño estructural de la página como, por ejemplo, las viñetas previas a un menú, no aporta nada, y es incluso molesta, la presencia de texto alternativo. En estos casos, para cumplir con las exigencias de XHTML, bastaría con facilitar al argumento alt una cadena de texto vacía, alt="".

Javier Montero Gabarró


Fecha de última actualización: 20 de abril de 2012


Imágenes en HTML – III: Un texto alternativo


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