Uso correcto de las etiquetas HTML para imágenes: img y figure

En este artículo, aprenderás a usar correctamente las etiquetas HTML: img y figure, que sirven para incrustar imágenes en nuestras páginas y proyectos web.

Imagen de portada con el texto: "Uso correcto de las etiquetas HTML para imágenes: img y figure".

En este artículo, aprenderás a usar correctamente las etiquetas HTML: img y figure, que sirven para incrustar imágenes en nuestras páginas y proyectos web.

Una vez conocidos los tipos de imágenes disponibles para incrustar en una página web y la manera de optimizarlas, el paso siguiente es incrustarlas en nuestros proyectos.

Etiqueta HTML figure

La etiqueta figure se escribe de la siguiente manera: <figure></figure>

La etiqueta figure es contenedora de la etiqueta imagen y su función simplemente es indicarle al navegador de que el contenido que está dentro de ella se trata de una imagen.

Por lo tanto, esta etiqueta es semántica y es muy buena práctica utilizarla, pues le gusta tanto a navegadores como a los motores de búsqueda.

Etiqueta HTML figcaption

Dentro de la etiqueta figure puede ir otra etiqueta que se escribe de la siguiente manera: <figcaption>Texto</figcaption>

Esta etiqueta permite agregarle a la imagen un texto en el pie de la imagen, este texto puede ser una atribución de derechos de autor o el texto que necesite ser mostrado en el pie.

Ejemplo de aplicación de una etiqueta figure

<figure>
<figcaption>Texto</figcaption>
</figure>
Implementación de la etiqueta HTML figure. Obvio, falta la etiqueta img, pero ya vamos para allá.

Etiqueta HTML img

La etiqueta img se escribe de la siguiente manera: <img>.

Como puedes notar, la etiqueta HTML de imagen no tiene etiqueta de cierre.

Atributos de la etiqueta HTML img

Esta etiqueta posee dos atributos que son fundamentales para poder cargar correctamente la imagen.

Atributo src. Este atributo es obligatorio porque indica la ubicación donde el navegador debe encontrar la imagen para poderla cargar. Las imágenes se pueden cargar a nivel interno, dentro de los archivos de nuestro proyecto o a través de una url externa.

Atributo alt. Este atributo HTML es opcional, sin embargo considero que como buena práctica es obligatorio insertarlo, esta propiedad tiene tres beneficios que mencionaré más adelante.

Ejemplo de inserción de la etiqueta img en una página web

<img src=”gatitos.jpg” alt=” En la imagen hay dos gatitos jugando en un patio. Uno café y otro gris.”>

Ejemplo completo de aplicación de las etiquetas HTML img y figure

Realizando un atajo en el editor de código Visual Studio Code, se puede generar el código básico HTML; el atajo es, ¡ y la tecla Tab.

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gatitos Jugando</title>
</head>
<body>
<main>
<section>
<figure>
<img src="./gatitos.jpg" alt="En la imagen hay dos gatitos jugando en un patio. Uno café y otro gris.">
</figure>
</section>
</main>
</body>
</html>

En resumen

Incrustar adecuadamente imágenes en nuestros proyectos proporciona muchos beneficios para la carga de nuestro proyecto, además los navegadores interpretarán mucho mejor el contenido de nuestras etiquetas HTML.

La etiqueta figure al ser contenedora, es semántica. Esto es bueno para la interpretación de la página web y para el SEO.

Utilizar el atributo alt, tiene tres grandes ventajas:

  1. Cuando la imagen no carga en el navegador por alguna razón, se muestra un ícono como de documento roto pero muestra el texto que se ha insertado en el atributo alt. (Normalmente el error está entre la silla y el equipo de cómputo).
  2. Internet también lo usan personas con dificultades visuales, entonces, al tener texto en este atributo les informamos a través de texto una breve descripción de la imagen. Personas completamente ciegas utilizan navegación por voz para que les informe el contenido que está mostrándose en pantalla.
  3. El atributo alt es muy bueno para el posicionamiento SEO, muchas personas pueden encontrar nuestro proyecto en internet a través de las imágenes; entonces, si proporcionamos la descripción de las imágenes tenemos otra posible fuente de tráfico.

En GitHub he subido una carpeta con los archivos de esta guía definitiva para incrustar imágenes en archivos HTML.

html/ejemplo_imagen at main · escuelawow/html
En este repositorio se encuentran conceptos de HTML - html/ejemplo_imagen at main · escuelawow/html

Suscríbete a nuestro boletín mensual

* indicates required

Powered by Mailchimp