La etiqueta figure de HTML5

html5La etiqueta <figure>  permite agregar contenido variado asociadas a una descripción o título, el cual es asociado semánticamente a este, de tal forma que podemos agregar una imagen, ilustración, diagrama, o incluso código. Como regla general, el contenido que agreguemos debe de estar relacionado al texto principal de la página.

Un claro ejemplo donde se puede emplear <figure>  es para agregar imágenes a un artículo, donde las imágenes tienen por lo general una descripción justo por debajo. Un claro ejemplo sería cualquier artículo de Wikipedia, ya que este inserta a lo largo de todas sus secciones imágenes que tiene que ver con el texto en cuestión.

Actualmente <figure>  es más utilizado para representar imágenes, porque es lo más común en una página además del texto, pero es importante resaltar que se puede utilizar para representar cualquier contenido. La clave de <figure>  es que nos permite asociar cualquier cosa con una descripción, de tal forma que son asociados semánticamente.

La etiqueta <figure>  se utiliza en conjunto con la <figcaption>  para representar la descripción del contenido. La etiqueta <figure>  puede tener cualquier contenido seguido de <figcaption>  o al revés, <figcaption>  seguido de cualquier contenido.

Si quieres aprender más sobre las mejoras y la web semántica, puedes ver estre otro articulo donde lo explico con más detalle.

Etiqueta Figure en acción:

 

Para comprender mejor como es que figure se puede utilizar, analizaremos un pequeño ejemplo de una página con una imagen, esta imagen tiene una descripción asociada. La idea es comparar una página que utiliza la etiqueta <img>  y otra de cómo quedaría con la etiqueta <figure> .

 

Ejemplo con <img>:

En este pequeño ejemplo analizaremos como le colocábamos una descripción a una imagen:

Ejemplo sin usar Figure

 

A hora veamos el documento HTML que forma la página anterior:

 

 

Observemos que simplemente agregamos un párrafo justo debajo de la imagen con la clase img-footer  para representar la descripción de la imagen, esto tiene un problema con los buscadores, porque no tiene forma de identificar que ese párrafo es la descripción de la imagen, y asume que simplemente es parte del contenido.

 

Ejemplo con <figure>:

El siguiente ejemplo ilustra cómo quedaría la misma página, pero utilizando la etiqueta <figure> .

 

Ejemplo con figure

 

A hora veamos el documento HTML que forma la página anterior:

 

 

Primero que nada, observemos que la página se ve idéntica con la diferencia que cambio el título, sin embargo, a nivel semántico la descripción está asociada a la imagen y los buscadores sabrán perfectamente que el texto en envuelto en la etiqueta <figcaption>  es la descripción de la imagen y no parte del contenido principal de la página. Este tipo de detalles ayudan a ganar CEO y lograr un mejor posicionamiento en los buscadores.

 

 

Clases de estilo:

En los dos ejemplos anteriores utilizamos la clase de estilos estilos.css para darle una presentación mas agradable, el archivo es el siguiente:

 

 

 

Conclusiones:

 

Como vemos, figure es mucho más simple de lo que podríamos creer y nos ayudara mucho en el CEO de la página. Por lo que es recomendable que ahora en adelante que quieres agregar una imagen, diagrama o código, no dudes en utilizar esta nueva etiqueta.

Artículos relacionados

WebSocket con Java En este artículo aprenderemos a implementar WebSocket con Java, ya que en el pasado ya había dado una completa Introducción a los WebSocket y explicam...
Introducción a los WebSocket Los WebSocket fueron introducidos recientemente con la llegada de HTML5 y es sin duda una de las mejoras más esperadas. Los WebSockets nos permite t...
Novedades de la etiqueta Table en HTML5 La etiqueta Table es sin duda la mejor opción para representar elementos en formato tabular o en tabla, debido a que permite crear rejillas perfectas ...

Oscar Blancarte

Ideológico, Innovador y emprendedor, Padre, Tecnólogo y Autor, amante de la ciencia y la tecnología en todos sus colores y sabores. Arquitecto de software & Full Stack Developer con experiencia en la industria del desarrollo de software y la consultoría. Amante de la programación y el Ajedrez.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *