Alt y Title – Diferencias y Obligaciones

Como parece que estas cosas gustan vamos a tratar otro aspecto básico de la edición HTML que puedes, y deberías, utilizar a la hora de escribir/personalizar tu blog WordPress.

Hoy quiero tratar un asunto casi místico: la diferencia entre los atributos ALT y TITLE aplicables a enlaces o imágenes, y con algún ejemplo de su uso.

Primero una descripción de su cometido …

Diferencias entre Alt y Title

TITLE – Esta etiqueta o atributo se puede utilizar tanto en imágenes como en enlaces, y es la encargada de ofrecer una descripción emergente (tooltip) de la imagen o enlace. Funciona en todos los navegadores.

ALT – Con esta tag HTML definimos el texto alternativo de las imágenes, que se muestra cuando la imágen no está disponible o para garantizar su accesibilidad. Es una etiqueta OBLIGATORIA en las imágenes, si no quieres incluir ningún texto descriptivo pon lo que te apetezca (^, *, etc). También funciona como tooltip en Internet Explorer.

Uso de ALT y TITLE

Como hemos visto en las descripciones, ambos pueden convivir en un mismo enlace a imágenes, no así el de TITLE que solo se debe aplicar a los enlaces.

En este ejemplo vemos como se aplica TITLE a un enlace:

<a title="Haz clic aquí para ir a Ayuda WordPress" href="https://ayudawp.com/">Ayuda WordPress</a>

Y lo que veríamos sería un texto, enlazado a una URL y que al colocar el cursor del ratón sobre el enlace nos mostraría el tooltip «Haz clic aquí para ir a Ayuda WordPress«:

Ayuda WordPress

En cuanto al uso de ALT y TITLE en imágenes los resultados serán distintos, como hemos dicho, dependiendo del navegador que utilicemos. No obstante, ALT será siempre OBLIGATORIO mientras que el uso de TITLE es opcional aunque necesario para cumplir los estándares del W3C, solo útil para añadir información adicional.

Por ejemplo, así …

<img title="Me encanta WordPress" src="https://ayudawp.com/imagenes/dandy-logo.png" alt="Logo wordpress con corazón" />

el atributo ALT es el que serviría en caso de no mostrarse la imagen, y TITLE solo como información adicional, al pasar el cursor sobre ella, como puedes ver aquí …

Logo wordpress con corazón

Si usáramos una imagen no existente veríamos el texto alternativo, definido por ALT, como en este ejemplo:

que, al ser una imagen inexistente solo veríamos el texto …

Esto, por supuesto, no solo puedes hacerlo en el editor HTML de WordPress, sino que también puedes aplicar los atributos ALT y TITLE desde el editor visual, en el cargador de imágenes. Por defecto WordPress añadirá la etiqueta ALT, que será el nombre del archivo sin la extensión (mejor si lo cambias), pero la etiqueta TITLE la debes añadir por tu cuenta, incluyendo un texto en la caja de inclusión de «Descripción» pues la caja de inclusión de «Leyenda» es un atributo propio de WordPress, que identifica como ‘caption‘, nada que ver con lo que estamos tratando.

En este ejemplo puedes ver el código y resultado del uso de ambos desde la utilidad de insertar imágenes de WordPress:

<img class="size-full wp-image-2972" title="alt-wordpress" src="https://ayudawp.com/wp-content/uploads/2008/10/alt-wordpress.png" alt="Como insertar Alt en WP" width="500" height="223" /> Como insertar Alt en WP

La imagen resultante es esta, con etiqueta ALT, etiqueta TITLE pero también el CAPTION de WordPress …

Como insertar Alt en WP
Cómo insertar Alt en WP

Espero te haya sido útil e instructivo.

VALORA Y COMPARTE ESTE ARTÍCULO PARA MEJORAR LA CALIDAD DEL BLOG…
(25 votos, promedio: 4.3)

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!

AVISO: Esta publicación es de hace 3 años o más. Si es un código o un plugin podría no funcionar en las últimas versiones de WordPress, y si es una noticia podría estar ya obsoleta. Luego no digas que no te hemos avisado.

25 comentarios en “Alt y Title – Diferencias y Obligaciones”

  1. Pingback: Los atributos ALT y TITLE en el posicionamiento - Carrero Bitácora de los Hermanos Carrero, David Carrero Fernández-Baillo y Jaime Carrero Fernández-Baillo.

  2. Hola.
    Sería más adecuado decir en este punto: <cite>Es una etiqueta OBLIGATORIA en las imágenes, si no quieres incluir ningún texto descriptivo pon lo que te apetezca (^, *, etc).</cite>

    Es una etiqueta OBLIGATORIA en las imágenes, si no DEBES incluir ningún texto descriptivo (imagen decorativa que no transmite ninguna información), deja el atributo ALT vacío.

    Saludos.

  3. Pingback: Las etiquetas ALT y TITLE » Cosas sencillas

  4. Por favor,

    Cuando utiliceis alt, no pongais cualquier cosa como contenido. Dedicad un minuto y poned la descripcion real, muchos usuarios os lo agradeceran.

    Dejemos de frivolizar la accesibilidad, y demosle la importancia que se merece!!

  5. De todas las páginas que he visto buscando sobre este tema, muchas, tú has sido quien ha conseguido que me entere por completo. Muy bien explicado y bien acabado.

    ¡Muchas gracias!

    Un saludo

  6. Palisandro David Gam

    Aprovechando este articulo, como puedo autmoatizar que las imagenes tengan el contenido mismo en ALT que en TITLE? o más bien que en la Gallery me coga el caption de Title

  7. Hay «title» como atributo y como etiqueta, son muy diferentes, ya que la etiqueta va en el «head» y el atributo dentro de las etiquetas «img» …

    1. No creo que se conveniente, ya que el title especifica el titulo de la imagen, valga la redundancia, a no ser que tengas 5 imágenes completamente iguales, cosa que seria un poco inlógica, las imágenes deben de tener por lo menos una variación, por lo que el title debe de ir acorde con ellas

  8. Muy buen post, para mi las imágenes ofrecen un valor muy importante para el contenido de un articulo y pienso que ayudan considerablemente para el SEO

  9. Muy buen post, para mi las imágenes aportan un gran valor al contenido de un articulo, y pienso que es un factor importante para el SEO

  10. Francisco Ynfante

    Muy buen post, para mi las imágenes ofrecen un valor muy importante para el contenido de un articulo y pienso que ayudan considerablemente para el SEO

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

 

Ir arriba Ir al contenido