[Sergio Iglesias](https://sergioiglesias.net) · Blog sobre Joomla
# Atributos alt, longdesc y title de imágenes en html
[ Añadir a fuentes preferidas ](https://www.google.com/preferences/source?q=sergioiglesias.net) 24 Enero 2011 [Tips Joomla](https://sergioiglesias.net/blog/joomla) 2 - 3 minutos Visitas: 18670
En este artículo vamos a ver algo que no es sólo para **Joomla!** sino que nos vale para cualquier **gestor de contenidos**. Se trata de ver el comportaminto que tienen los atributos alt, longdesc y title de la etiqueta <img> de HTML.
Vamos a ver estos comportamientos.
El motivo de este artículo viene de un mail que recibí de un amigo este fin de semana. En él me comentaba que, cuando pasaba con el ratón por encima del menú, se veía el "título alternativo". Pero esto solo se daba en Internet Explorer. Si utilizaba Firefox o Chrome no se mostraba.
Cuando leí esto y vi que solo se veía en Internet Explorer enseguida me di cuenta que se trataría de alguna de esas interpretaciones que nos da el navegador y, cuando fui a ver su sitio web, y vi que el menú lo tenía con enlaces en imágenes, comprendí de qué se trataba: él utiliza el atributo "alt" de la etiqueta imágen y es lo que él llama "título alternativo". Esta etiqueta se utiliza como texto alternativo de la imágen, siempre que éste deba llevarlo (es decir, sea parte del contenido y tenga una interpretación; ya que si es parte del diseño debería estar en el CSS). En principio no debería mostrarse al pasar por encima con el ratón, puesto que para eso existe el atributo "title", pero IE lo hace de esta manera. Otra cosa que no utilizaba y que sería más conveniente, es el atributo "title" de la etiqueta <a href="/"> (la que se encarga de formar un enlace).
Lo correcto (aunque no lo sería del todo), en el caso de este menú, sería utilizar el atributo "title" de la etiqueta <a href="/"> y el atributo "alt" de la etiqueta <img src="/">. Es decir, algo así:
```
```
Yo no utilizaría imágenes para crear el menú. Es preferible hacerlo con texto y, si se quiere añadir estilo, para eso tenemos las hojas de estilo o CSS.
Para finalizar esta puntualización del uso de estos atributos, veremos otro que tiene la etiqueta <img>. Se trata del atributo "longdesc" y se utiliza para complementar al atributo "alt"; es decir, proporcionar una descripción más larga que la que proporciona este último.
Lo que contiene este atributo es la dirección de una página web en la que se pone la descripción de la imagen. Para hacernos una idea, imaginad una imagen de una gráfica. Para una persona que pueda verla, seguro que puede interpretarla. Pero para personas con discapacidad visual o invidentes, necesitarán de una explicación de la misma (puesto que la imagen es de contenido).
Un uso correcto sería este:
```
```
Dentro de la página se describirían los datos que aparecen en la imagen.
Espero que os ayude este artículo a la hora de **escribir de una forma más accesible**.
Tenéis más información sobre estos atributos en [¿Qué hace el atributo alt?](http://accesibilidadenlaweb.blogspot.com/2006/03/qu-hace-el-atributo-alt_17.html "Qué hace el atributo alt") y [El atributo longdesc](http://accesibilidadenlaweb.blogspot.com/2006/04/el-atributo-longdesc.html "El atributo longdesc").
Ejemplos:
**a) Imagen sin alt:**
**b/ Imagen con alt:**
**c/ Imagen con alt y con title:**
PD: se me olvidaba comentar. Si una imagen está dentro del contenido, aunque no se le ponga nada al atributo "alt", siempre debe llevarlo.
[ Añadir a fuentes preferidas ](https://www.google.com/preferences/source?q=sergioiglesias.net)Gratuito · Primer paso recomendado
### ¿No sabes bien en qué estado
está tu web Joomla?
Antes de decidir si hay que arreglar, migrar o mantener, conviene saber qué está pasando. Reviso el estado de tu web — versión de Joomla, extensiones y lo que se pueda ver — y te digo qué conviene hacer y en qué orden.
Versión de Joomla y ruta de actualización Estado de extensiones Plan de acción con recomendaciones Informe por email + HTML
[ Solicitar revisión gratuita sin compromiso ](https://sergioiglesias.net/revision-joomla-gratis)Respuesta en 24–48 h laborables
[](https://sergioiglesias.net/sobre-mi)##### Consultor Web Joomla Senior
Soy [Sergio Iglesias](https://sergioiglesias.net/sobre-mi). Ayudo a empresas, instituciones y profesionales a convertir su web en una herramienta real de negocio: segura, escalable y fácil de gestionar. Soy especialista en migraciones complejas de Joomla sin pérdida de datos, desarrollo de extensiones y plantillas a medida y ofrezco mantenimiento y evolución de tu CMS.
[](https://x.com/sergiois "Sergio Iglesias en X") [](https://www.linkedin.com/in/sergiois "Sergio Iglesias en Linkedin") [](https://github.com/sergiois "Sergio Iglesias en Github") [](https://sergiois.github.io/ "Extensiones Joomla de Sergio Iglesias")
### Suscríbete a mi newsletter
¿Te ha gustado el artículo? Suscríbete a mi newsletter y recibe contenido exclusivo.
Podrás hacer gratis un **Curso de desarrollo de plantillas Joomla**.
[Quiero apuntarme!](https://sergioiglesias.net/newsletter)
### No hay comentarios
### Deja tu comentario
En respuesta a Some User
Nombre \*
Dirección de email \*
Texto del comentario \*
Doy mi consentimiento para que mi información personal sea recopilada y procesada por este sitio para aceptar y mostrar mi comentario, así como para notificarme sobre las respuestas a él según la [Declaración de privacidad](https://sergioiglesias.net/politica-privacidad) del sitio. \*