Hoy hablaremos de la etiqueta <figure> en HTML. Si te acuerdas, en el anterior artículo te hablé de la etiqueta figcaption y vimos así un poco por encima la etiqueta Figure, que es de la que vamos a hablar hoy.
No solamente verás qué es, sino que además aprenderás cómo se usa con un ejemplo muy fácil.
Y antes de pasar al objetivo de este artículo, recuerda que este capítulo forma parte del diccionario de HTML del canal DropCoding, donde puedes conocer todo sobre este lenguaje.
Y ahora… ¡vamos al lío!
Para qué sirve Figure en HTML
La etiqueta figure en HTML se usa para agrupar contenido relacionado como imágenes, vídeos o ilustraciones.
En otras palabras, es como poner una foto en un marco con una descripción debajo.
Esta etiqueta ayuda a entender que la imagen y su descripción están conectadas y forman parte de la misma idea.
Y seguramente ahora estáis pensando “vale David, okey, ya nos has explicado la teoría.
Pero ¿cómo se utiliza?”
Pues eso es lo que vamos a ver en el siguiente ejemplo.
Ejemplo de cómo usar figure en HTML
Si te fijas en la imagen del editor verás que dentro del body está la etiqueta Figure, que sirve para envolver, y la etiqueta Figcaption.
<figure>
<img src="cuadro-plantas.jpg" alt="Descripción de la imagen">
<figcaption>Cuadro con plantas (super chulo)</figcaption>
</figure>La etiqueta figcaption sería el comentario o la leyenda que iría debajo de la imagen, y la etiqueta Figure es todo lo que lo envuelve.
En el navegador (con unos pocos estilos) quedaría de la siguiente manera:
¡Mira qué cuadro tan chulo con las plantitas!
Lo engloba todo el elemento sería la etiqueta Figure, y debajo de la imagen ves el Figcaption con el comentario de la imagen.
Conclusión
El uso de la etiqueta Figure no tiene más complicación, pero de todos modos hay algunas consideraciones que tienes que tener en cuenta:
- El uso adecuado de la etiqueta figure es para contenido que es autónomo y que puede ser movido fuera del flujo principal del documento. Ejemplo: imágenes, gráficos, vídeos, fragmentos de código, etc.
- Este tipo de etiquetas puede contribuir a la semántica de tu sitio web y supuestamente puede mejorar el SEO.
- Accesibilidad: Usar <figure> y <figcaption> mejora la accesibilidad del contenido, ya que los lectores de pantalla pueden identificar y anunciar este contenido de manera más efectiva.
Espero que te haya gustado el artículo y recuerda: Si tienes cualquier duda o sugerencia, déjala en los comentarios. Venga, no seas tímido.
Nos vemos en la próxima lección.