Images

En HTML las imágenes son definidas con la etiqueta <img>. La etiqueta <img> es un elemento vacío ya que solo contiene atributos y, por lo tanto no tiene etiqueta de cierre. La manera más simple de usar la etiqueta <img> es con el atributo "src" (src es una abreviación de "source"). El valor del atributo "src" es la url de la foto que tú quieres mostrar.

La url apunta a donde tienes guardada tu imagen, que normalmente se encuentra en tu servidor.

<img src="my-picture.jpg">

Además del atributo "src", el atributo "alt" es requerido también. "Alt" es una abreviación para alternar texto. El valor de el atributo "alt" es el contenido de reserva de elementos - esto significa que, el atributo "alt" se mostrará si el buscador no pudo mostrar la imagen en sí. El valor de el atributo "alt" es también lo que los lectores de pantalla leerán cuando vean tu imagen. Esto significa, que el atributo "alt" debería ser usado para describir la actual imagen. Digamos, la imagen es retrato de Angelina Jolie, el HTML se vería así:

<img src="my-picture.jpg" alt="Portrait of Angelina Jolie">

Por otra parte, una imagen de Picasso podría ser descrita como "Retrato de Ángel Fernández de Soto". Una obra de la última parte del período azul de Picasso. Un hombre probablemente bebiendo ajenjo, representando un estilo sombrío". ¿Y por qué esta larga descripción?, Imagina que no puedes ver la imagen y el "alt"es tu descripción de la imagen.

El último atributo a mencionar respecto a la etiqueta de imagen es el atributo "título". Si alguna vez has pasado tu cursor encima de una imagen y has visto texto, esto es el valor del atributo "titulo". Adicionalmente, este texto es a menudo como información de herramientas. Esto agrega significado semántico a tus imágenes, pero debería solamente ser usado en imágenes donde el efecto "hover" no tenga conflicto con la usabilidad de tu página. Esto significa que no deberías usar el atributo "título" en imágenes que funcionan como navegación de páginas.

Lo que has aprendido

• Para mostrar una imagen, siempre tienes que agregar el atributo "src" a la etiqueta imagen.
• El valor de el atributo "alt" es esencial para los lectores de pantalla y sí el navegador por alguna razón no puede mostrar tu imagen.
• El atributo "alt" es relevante para los lectores de pantalla y motores de búsqueda - así que recuerda usarlo.