Imágenes en HTML – IV: El título

Imágenes en HTML - El títuloHay otro atributo relacionado con el elemento <img> que debes conocer y que se utiliza para asociar un título a cada imagen: me estoy refiriendo a title.

Te lo vas a encontrar en muchos otros elementos, así que no debe sorprenderte que las imágenes también lo incluyan.

¿O quizás sí?

En la tercera entrega de la serie tratamos el atributo alt, con el que facilitábamos un texto alternativo para el caso en el que no se quisiera o pudiera descargar la imagen.

¿Qué sentido tiene, entonces, un título, cuando ambos atributos se refieren más o menos a lo mismo?

Por un lado, piensa que alt le saca ventaja históricamente a title. Cuando aquél ya triunfaba entre las páginas web de la época, éste apenas comenzaba a extenderse como atributo común. Así que cuando title alcanzó la gloria, se encontró con un alt que ya tenía asumido, en parte, esa función.

Pero, entonces, ¿da igual escribir en un lado que en otro?

Ante todo, es una diferencia conceptual: title hace mención al título de la imagen y no a la función que tiene en relación al contexto de la página. Por el contrario, alt explica la imagen en relación a ese contexto. Te lo voy a aclarar on un ejemplo:

Este es el fragmento de código HTML que referencia la imagen con la ovejita experta en HTML que abre esta entrada:

<a href="http://elclubdelautodidacta.es/wp/wp-content/uploads/2012/02/ECDA-HTML-5cm.jpg"><img src="http://elclubdelautodidacta.es/wp/wp-content/uploads/2012/02/ECDA-HTML-5cm.jpg" alt="Imágenes en HTML - El título" title="La oveja experta en HTML" width="107" height="142" class="alignleft size-full wp-image-3024" />

Como título he facilitado

title="La oveja experta en HTML"

y como texto alternativo

alt="Imágenes en HTML - El título"

La imagen de esa oveja será siempre la de la oveja experta en HTML. Es algo inherente a la propia imagen. Sin embargo, en función del contexto en que se encuentre tendrá un significado u otro. En el ejemplo, he preferido emplear, como texto alternativo, el propio título de la página, pues es la imagen que sirve de entrada al contenido. En otras páginas en las que usase la misma imagen emplearía, en cambio, un texto alternativo diferente.

Voy a explicarte el truco que yo empleo para saber qué escribir en alt

El texto indicado en alt tiene una función clara, como ya sabes, y es facilitar un texto alternativo a la visualización de la imagen. Lo que quizás no sepas es que hay navegadores especializados para personas con deficiencia visual que convierten el texto de una página en sonido. Cuando llegan a una imagen, buscan el contenido del atributo alt y lo lo leen como descripción de ella.

Así que, la próxima vez que te preguntes qué poner en alt, cierra los ojos y trata de escuchar lo que te diría la página llegado el punto de la imagen. Seguro que lo tendrás claro.

Por otro lado, alt es un atributo obligatorio en las ramas de HTML más serias, mientras que title es opcional.

A los motores de búsqueda les gusta encontrarse contenido tanto en title como en alt (aunque favorecen más a este último). Sólo por eso debería bastarte para utilizarlos.

Desde el punto de vista de la presentación, el texto que escribas en title será, en la mayoría de los navegadores modernos, un texto flotante que se le mostrará al visitante cuando descanse su ratón sobre la imagen.

Pruébalo: deja el ratón sobre el hocico de la ovejita de arriba, a ver qué te dice…

Javier Montero Gabarró


http://elclubdelautodidacta.es/wp/2012/05/imagenes-en-html-iv-el-titulo/


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

Deja un comentario

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.plugin cookies

ACEPTAR
Aviso de cookies