28 ago. 2013

Etiquetas title y alt en imágenes

Cómo utilizar correctamente las etiquetas TITLE y ALT en las imágenes.

En este artículo trataré de explicar cómo utilizar correctamente las etiquetas TITLE y ALT en las imágenes que insertemos en cualquier página web.

DIFERENCIAS ENTRE LAS ETIQUETAS TITLE Y ALT

La etiqueta TITLE se utiliza para mostrar una descripción de la imagen. Normalmente en la etiqueta TITLE de las imágenes se suele escribir el título o una breve descripción de la misma, de esta manera tanto los navegadores como los internautas saben de qué va la foto.

La etiqueta TITLE funciona con todos los navegadores y se manifiesta cuando el usuario pone el ratón encima de una imagen, en ese momento aparece un cuadro emergente con el texto que se ha indicado en el TITLE.

Mediante la etiqueta ALT definimos un texto alternativo sobre las imágenes que se mostrará únicamente cuando éstas no puedan mostrarse, como por ejemplo un error en su carga. Esta etiqueta es de suma importancia puesto que hace que nuestra web sea más accesible.

Si las imágenes se utilizan como enlace a otras páginas, la etiqueta ALT puede emplearse para dar información sobre el enlace. Si no se utilizan como enlaces, se pueden emplear para complementar la información definida en la etiqueta TITLE.

CÓMO UTILIZAR LAS ETIQUETAS TITLE Y ALT

Vamos a mostrar un ejemplo práctico sobre cómo utilizar correctamente las etiquetas TITLE y ALT: Mostraremos una imagen con el logo de Apnea Academy (Organización internacional para la enseñanza de la Apnea) que emplearemos como enlace a una página con información sobre un curso de apnea.

Primer curso de Apnea Academy en Valencia organizado por EspaiSub

Veamos el código HTML que hemos insertado para mostrar la imagen:
<a href="URL de la página web"><img alt="Primer curso de Apnea Academy en Valencia organizado por EspaiSub" src="URL de la imagen" title="Apnea Academy - Organización para la enseñanza e investigación de la apnea" />
Explicación del uso de las etiquetas TITLE y ALT:
TITLE: Hemos escrito una breve descripción de la imagen para que la gente sepa qué es Apnea Academy. En este caso indicamos qué es Apnea Academy.

ALT: He escrito una breve descripción sobre el enlace que contiene la imagen, para que se tenga información sobre donde va el enlace.


Si te ha gustado el artículo sobre Etiquetas title y alt en imágenes puedes colaborar con este Blog visitando a nuestros patrocinadores, con esto me ayudarás a mantener el Blog y pueda escribir más artículos.


ARTÍCULOS QUE TE PUEDEN INTERESAR

Cómo corregir error al iniciar Xampp: Apache shutdown unexpectedly
Cómo guardar la configuración de una red wifi en Windows 7
Cómo abrir puertos windows 7
Atajos de teclado de Windows
Windows 7 no muestra la fecha