Etiquetas figure y figcaption del estándar HTML5

La versión número 5 del estándar del lenguaje de etiquetas para la creación de páginas web, HTML5, nos trae un gran número de nuevos elementos que nos brindan grandes funcionalidades. Desde etiquetas a nuevas formas de programación que permiten hacer grandes aplicaciones que se ejecuten desde el mismísimo navegador. HTML5 cambiará la forma en que usamos y programamos para la web.

HTML5 es la mejora e implementación de un montón de tecnologías en un estándar aceptado ampliamente. Nos trae nueva estructura semántica, almacenamiento de datos, trabajo offline, conectividad, CSS3, multimedia y más. Sitios como HTML5 Rocks y HTML5 Logo nos dan un vistazo más profundo sobre esto. Dentro de los elementos semánticos está la etiqueta <figure></figure> y <figcaption> </figcaption> que veremos un poco más a continuación.

El elemento <figure>

No recuerdo bien como di con esa información. Mientras creaba un sitio para un familiar, decidí darme a fondo un poco más con HTML5 y aprendí sobre la etiqueta figure. La idea de esta etiqueta es marcar contenido que tiene imágenes, diagramas, ilustraciones, fotos y ejemplos de código. La W3C en sus borradores ofrece más información sobre la etiqueta figure, aunque esta es la idea básica.

La etiqueta <figcaption> o figure caption

Es la luna para el sol. Bueno, no tan estrictamente. Esta etiqueta plantea que la usemos, solo una vez, dentro de una etiqueta figure, para dar información, agregar texto o una leyenda. Es totalmente opcional y puede aparecer antes o después del elemento que se incluya en la etiqueta figure. Para mayores informes, la W3C.

Uso

Por desgracia, como esto es un blog usando el wordpress no hospedado, no puedo dar demostraciones serias del código y de como se ven los resultados. Sin embargo, para detallar bien pueden ir a la página del Doctor donde encontré esta explicación y ver las imágenes como aparecen usando estas etiquetas.

Un ejemplo usando solo la etiqueta figure sería algo como:

<figure>
  <img src="archivo-de-imagen.jpg" alt="texto para ayudas visuales">
</figure>

 

Ahora con la etiqueta figure y figcaption sería algo como el código a continuación:

<figure>
  <img src="/imagen.jpg" alt="texto alternativo">
  <figcaption>Una imagen bonita y con un <a href="http://www.flickr.com/photos/rclark/">enlace</a></figcaption>
</figure>

 

La etiqueta figure permite anidarle varias imágenes:

<figure>
  <img src="/kookaburra.jpg" alt="Kooaburra">
  <img src="/pelican.jpg" alt="Pelican stood on the beach">
  <img src="/lorikeet.jpg" alt="Cheeky looking Rainbow Lorikeet">
  <figcaption>Varias imágenes</figcaption>
</figure>

 

Es una pena no poder tener una forma de mostrar los resultados a la par del código, aunque esta es la forma correcta de usar tales etiquetas.

Si estás en el camino de adoptar HTML5 en tus proyectos web, la etiqueta figure sin duda hará parte de la estructura del sitio, sin embargo, hay que tener consideraciones para no usar esta etiqueta de manera indiscriminada. En algunas situaciones (ejemplo un banner) simplemente puedes usar la siempre fiel etiqueta <img>,  <div> e inclusive <canvas>. Es cuestión de determinar correctamente la posición e importancia del elemento.

Si el contenido es esencial pero la posición en el flujo del contenido no, usa figure.