Ayuda WordPress

Recibe gratis los artículos por RSS Recibe gratis los artículos en tu Email Recibe gratis los video tutoriales en iTunes Recibe gratis los vídeos por RSS Síguenos en Twitter

Inicio

Foros

Descargas

WordPress Español

Comunidad

Servicios y Contacto

Recursos, themes, plugins y tutoriales en español

Alt y Title – Diferencias y Obligaciones

15 Octubre, 2008

Autor: Fernando Tellado | Categoría: Programación, Tutoriales / Trucos

Comentarios: 11

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í …

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 …

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

Espero te haya sido útil e instructivo.

¿Te gustó este post? ¡Compártelo!

También te puede interesar:

¿Utilizo Cache o No?
WordPress Smiley Spam
Versión final de Artisteer aplazada, pero lista para descarga
Texto “more” personalizado en cada post
Snazzy Archives – Un archivo distinto

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

YO (5 comentarios) dijo:

15 Octubre 2008 a las 13:36

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

Responder

Fernando Tellado (2102 comentarios) dijo:

15 Octubre 2008 a las 13:51

@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

Responder

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. dijo:

15 Octubre 2008 a las 19:34

[...] 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 [...]

Responder

YO (5 comentarios) dijo:

15 Octubre 2008 a las 20:26

Muchas gracias por la aclaración.

Un saludo.

Responder

graphsa (1 comentarios) dijo:

16 Octubre 2008 a las 6:46

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

Responder

Usabilidad web (1 comentarios) dijo:

16 Octubre 2008 a las 17:56

Una información muy interesante

Responder

kcmr (2 comentarios) dijo:

16 Octubre 2008 a las 18:25

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.

Responder

Las etiquetas ALT y TITLE » Cosas sencillas dijo:

17 Octubre 2008 a las 10:19

[...] 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, [...]

Responder

fran (3 comentarios) dijo:

17 Octubre 2008 a las 11:08

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

Responder

Jack The Ripper (78 comentarios) dijo:

17 Octubre 2008 a las 11:53

Muy bueno

Responder

Jesus Lombardo (1 comentarios) dijo:

17 Octubre 2008 a las 15:45

bue articulo

Responder

Escribe un Comentario

Nombre
Email

Web

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>

Avísame de los comentarios por email

Cancelar respuesta

Buscar entradas:

Patrocinadores

Ayuda para ...

Principiantes

Avanzados

Expertos

Participa en el Debate

Simbelmynë!: Cómo lo hago? No me sale, me marca error, uso el plugin sideposts, pero no me gusta...
Simbelmynë!: Creo que incluiría también WPSupercache. Un saludo genial blog!
Kelly: Yo incluiria feedbrner.
Manuel: Pues es interesante para tener un forito para el blog, pero no lo veo yo un foro este...
evcorreu: de acuerdo, estos son como los de cajón.

Noticias Breves

… habría que inventarlo.

[#7]

Si quieres posicionar tu WordPress y ganar visitas provenientes del buscador Bing harás bien en gestionarlo con las Webmaster Tools de Bing, igual que en las Webmaster Tools de Google.

[#3]

Ya está disponible la versión cuasidefinitiva de BuddyPress 1.1, que puedes descargar para ir probando (en algún sitio que tengas para pruebas antes de ponerlo en producción).

[#1]

Patrocinadores

Ahora mismo en los FOROS ...

Ayuda urgente
Último mensaje de: Joel López M.
En el foro: Instalación / Actualización
Ayuda con Modificacion de sidebar.
Último mensaje de: rubio25
En el foro: Themes y Diseño
Como pongo una imagen en leer mas?
Último mensaje de: ealexander
En el foro: Themes y Diseño
Como desinstalar bbpress
Último mensaje de: Jonathan
En el foro: bbPress - TalkPress
Migrar de Localhost a un Dominio
Último mensaje de: katarsis20032002
En el foro: Dominios - Hosting

Recomendamos

Posicionamiento en buscadores

Compre enlaces ¡ahórrese 25 €!
Vende enlaces en tu blog
Gana dinero online

Categorías

bbPress

BuddyPress

Descargas

Entrevistas

General

Ingresos

Miniposts

Opinión

Plugins

Programación

Reviews

Seguridad

SEO

Themes

Tutoriales / Trucos

Vídeos

Wordpress.com

Wordpress.org

Tags

Administración Akismet Automattic Avanzado bbPress Blogging BuddyPress código CMS Codex Comentarios CSS Dashboard España Español Experto Feed Feedburner Firefox FTP Google htaccess HTML iPhone Mac Matt Mullenweg mysql PHP Principiante RSS SEO spam Tags traducción twitter widgets Wordcamp WordPress Wordpress.org Wordpress 2.5 Wordpress 2.6 Wordpress 2.7 WordPress 2.8 wordpress mu Youtube

Archivo

Octubre 2009 (9)
Septiembre 2009 (47)
Agosto 2009 (66)
Julio 2009 (68)
Junio 2009 (57)
Mayo 2009 (63)
Abril 2009 (66)
Marzo 2009 (70)
Febrero 2009 (37)
Enero 2009 (93)
Diciembre 2008 (91)
Noviembre 2008 (89)
Octubre 2008 (90)
Septiembre 2008 (76)
Agosto 2008 (79)
Julio 2008 (104)
Junio 2008 (109)
Mayo 2008 (91)
Abril 2008 (134)
Marzo 2008 (126)
Febrero 2008 (112)
Enero 2008 (121)
Diciembre 2007 (15)

Últimas entradas

9 Plugins que WordPress debería incorporar por defecto
Como quitar el aviso de actualizar WordPress
WordPress 2.8.4 Español
La muerte de los themes gratis
De bien nacido es ser agradecido (septiembre 2.009)
Si no existiera WordPress …
La NASA promueve el uso de WordPress
BuddyPress 1.1 lista para descarga
Como actualizar WordPress MU
WordPress Quick Installer

Usuarios Registrados

Acceder

Usuario
Clave
Recuérdame

Registrarse
Recuperar contraseña

Translate this Blog

| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |
By N2H

Blogroll

AdseoK

Ajuda WordPress

aNieto2K

BdBloggers

Carrero

Codex WordPress

Commlines

Comunidad WordPress

FAQ WP.com

Foro WordPress

Hack WP

Lorelle

Plugins y Themes

SEO WordPress

UBH

Wikipeando

Wikipedia WP

Wordpress Catalá

WordPress España

WordPress Hacks

Wordpress Languages

WordPress Manía

Wordpress-es

WP Nexus

WordPress Ayuda WordPress Coloriuris Tecnología Obsoleta

Code is Poetry

David Táboas Empresa Conectada