Etiqueta de imagen html

Para hacer atractivas las páginas de un sitio web, no podemos limitarnos a insertar en ellas exclusivamente contenido textual.
Por otro lado, nos encontramos en un período histórico donde nunca antes la cultura de lo visual había asumido tanta importancia. Cada usuario se sentirá atraído principalmente por la parte 'estética' de un sitio web. Por lo tanto, es necesario insertar varias imágenes dentro de nuestras páginas. Veamos cómo.

Etiquetas de imagen html

La etiqueta a usar para incorporar una imagen en una página html es la etiqueta <img>.

Esta es una etiqueta independiente: no necesita una etiqueta de cierre.

La etiqueta img cuenta con dos atributos fundamentales: “src” y “alt”.

El atributo "src" significa "fuente" e indica la fuente de la imagen: puede ser un enlace externo a la misma o la ruta del archivo dentro de tu ordenador (la segunda opción siempre es recomendable, ya que la URL de la página de referencia de su img puede, con el tiempo, cambiar, causando problemas con la visualización de la imagen).

El atributo "alt" (abreviatura de "texto alternativo") es un atributo que tiene que ver principalmente con la accesibilidad de nuestra imagen. De hecho, proporciona una alternativa a la visualización de la propia imagen cuando, por una u otra razón, esto es imposible; en cambio, gracias a este atributo, mostraremos un texto descriptivo de la imagen.

Sin este atributo, el uso de la imagen sería imposible no solo para aquellos que tienen problemas de conexión, sino también, y sobre todo, para  personas invidentes o con discapacidad visual que utilizan un software que, a través de un sintetizador de voz, ellos leen el contenido del sitio. ¿Y cómo se puede leer una imagen?

¿Entiendes, ahora, cuánto es importante el uso de este atributo?

Por último, pero no menos importante, el atributo "alt" facilita el SEO y ayuda a indexar tu sitio web.

La imagen html también puede tener otro atributo: es el "título", que también es importante para el SEO.
El atributo "título" significa que cuando colocas el cursor sobre la imagen (en la jerga hablamos de "pasar el cursor" sobre la imagen), aparece una ventana con el título de la imagen escrito.

Cuando añadas una imagen en tu página, tena cuidado de insertarla dentro de dos etiquetas adicionales: estamos hablando de las etiquetas <Figure> </figure> y <figcaption> </figcaption>.

El primero se usa semánticamente para abarcar contenido visual (imágenes, ilustraciones, diagramas, etc.) y se acompaña del segundo para agregar un pie descriptivo a la foto.

Ahora ya lo sabes todo: ¿List@ para dar rienda suelta a tu creatividad agregando imágenes a tu página?