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 …

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, ambas etiquetas 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="http://ayudawordpress.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, en este ejemplo …

<img title="Me encanta WordPress" src="http://ayudawordpress.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 imágen, 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:

<img title="Me encanta WordPress" src="http://ayudawordpress.com/imagenes/dandylogo.png" alt="Logo wordpress con corazón" />

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

Logo wordpress con corazón

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="http://ayudawordpress.com/wp-content/uploads/2008/10/alt-wordpress.png" alt="Como insertar Alt en WP" width="500" height="223" />

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

Como insertar Alt en WP

Como insertar Alt en WP

Espero te haya sido útil e instructivo.

¿Te gustó este post? ¡Compártelo!
  • Bitacoras.com
  • TwitThis
  • Facebook
  • Meneame
  • Google Bookmarks
  • del.icio.us
  • Live
  • Technorati
  • Ping.fm
  • Wikio
  • Turn this article into a PDF!
  • E-mail this story to a friend!
  • Print this article!

También te puede interesar:

cursos formación continua

    11 comentarios en “Alt y Title - Diferencias y Obligaciones”

  1. YO (4 comentarios) dijo:

    ¿Y dónde se pone el title para una imagen con enlace?. ¿En el enlace o en la imagen?.
    Supongo que en el enlace.

  2. @YO: Da igual en realidad, pues el tooltipo irá unido a la imagen/enlace, y todo va juntito, el lector no va a distinguir una cosa de otra. El Alt si, ese va con la imágen :)

  3. [...] Interesante artículo sobre las diferencias entre “alt” y “title”, aprende un poco más sobre estos atributos HTML para imágenes y enlaces. Mejora tu posicionamiento en buscadores cuidando los detalles. Etiquetas: alt, buscadores, enlaces, html, imágenes, posicionamiento, title [...]

  4. YO (4 comentarios) dijo:

    Muchas gracias por la aclaración.

    Un saludo.

  5. graphsa (1 comentarios) dijo:

    Un articulo muy ilustrativo y de refuerzo a las buenas practicas para escribir en html.
    Gracias

  6. Una información muy interesante

  7. kcmr (2 comentarios) dijo:

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

    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.

  8. [...] el blog de Carrero hacen referencia a un interesante artículo que nos dejan en Ayuda WordPress, que aún siendo muy básico, es a la vez importante en la edición HTML que puedes, y deberías, [...]

  9. fran (3 comentarios) dijo:

    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!!

  10. Muy bueno :)

  11. bue articulo

Escribe un Comentario

XHTML: Puedes usar estas etiquetas: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>



Subir

Expertos en WordPress
Euribor
Hardware. Software. Ocio & Multimedia. Humor. Internet. Videojuegos.Noticias
Participa en el Debate
  • ejner69: La verdad ignoro el por que y los casos que he leído no me han terminado de convencer....
  • carlos: Muchas gracias Ejner, He visto que algunos autores no son partidarios de hacer ese...
  • ejner69: Debes editar los permalinks de tu WordPress. Ve a ‘Enlaces permanentes’ y...
  • Merlyn: Conozco un plugin muy bueno para esto: Hidepost.
  • edder15x: yo quiero meter una encuesta a mi blog pero cuando lo pongo me sale que tengo que...
Noticias Breves
  • Si quieres aprender como hacer multitud de diseños distintos para WordPress no te pierdas esta estupenda recopilación de 26 tutoriales de diseño de blogs WordPress.

    [#3]

  • Acaba de salir a la luz la nueva versión de WordPress para iPhone 1.3, con soporte completo para el firmware de iPhone 3.0. Va de cojones estupendamente. Altamente recomendable esta actualización, que tienes en iTunes.

    [#1]

  • Me avisa Kike Alonso de un nuevo plugin que permite que los comentarios que dejen tus amigos de Friendfeed al respecto de un post de tu sitio WordPress aparezcan también en tu post como comentarios normales, algo realmente interesante pues permite, con algunos clientes de escritorio e iPhone, comentar en blogs sin dejar de usar la aplicación de mensajería.

    [#6]


  • Ahora mismo en los FOROS ...
    Usuarios Registrados
  • Acceder

  • Translate this Blog
    Spanish flagItalian flagChinese (Simplified) flagPortuguese flagEnglish flagGerman flagFrench flagJapanese flagRussian flagSwedish flagCatalan flagHebrew flag                              
    By N2H