Qué son los Textos Alternativos y cómo se colocan?

Ya solo nos queda un trocito de aquél código para dominar el Html de las imágenes. Se trata del alt, que sirve para indicar los textos alternativos a la imagen. Pero qué es eso?

El texto alternatico es aquella frase que aparecerá en la web cuando por el motivo que sea el navegador no cosigue mostrar la imagen. Esto puede ocurrir cuando el navegador del visitante es muy antiguo, o cuando la línea de código no está bien escrita, o si has escrito mal la ruta de la imagen (colocando mayúsculas por ejemplo...) u olvidaste subir la imagen al servidor.

Pero a pesar de estar seguro de que nada de eso va a ocurrir, aún así, es obligatorio colocar ese alt. Un motivo es, porque es el modo correcto de escribir código Html5. Otro motivo, y este sí que es importante, es que Google va a conocer la temática de tus páginas por la cantidad de palabras clave que aparezcan en ella y, uno de los lugares en los que busca esas palabras clave es en el alt de las imágenes, de modo que seríamos muy tontos si no aprovecháramos esa oportunidad, no? Si no sabes lo que son las palabras clave confórmate con acordarte de poner siempre los alt y ya sabrás mejor el porqué más adelante, oki? Confia en mí!! je je je.

La forma correcta de colocar el alt es simplemente escribiendo alt="y dentro lo que quieras". No olvides las dobles comillas encerrando el texto. Procura poner algo que tenga que ver con la imagen, como por ejemplo una descripción de la misma. Y si puedes aprovechar para usar algunas de tus palabras clave en esa descripción, mejor que mejor.

Con esto nos cargamos la explicación de la línea de código Html necesario para colocar imágenes en una página web. La línea completa, te recuerdo, queda así:

<img src="ruta/archivo.extensión" width="111px" height="222px" alt="Texto Alternativo">

o, para que veas un ejemplo real (aunque inventado), este otro:

<img src="imagenes/puesta-de-sol.png" width="450px" height="230px" alt="Las mejores puestas de sol, todoimagenes.com">

Si ahora cotilleas dentro del código de algunas páginas (de esta misma que lees) podrás ya identificar las líneas Html correspondientes a las imágenes y podrás ver todas estas propiedaes que te acabo de contar. Si ves alguna más que no he puesto yo será porque no hacen falta para nada o de algún asuntillo que me pueda quedar pendiente de explicaros, y que veremos más adelante.

Fácil o qué? ;=)