Consejo Rápido: Considere Envolver su Código con un elemento “figure”.

La etiqueta <figure> fue presentada con HTML5 hace algún tiempo, aunque es posible que usted no esté familiarizado con lo que hace, o como puede ser usada en muchas situaciones diferentes. En este curso, aprenderá la diferencia entre <figure> y otras etiquetas similares, y como puede comenzar usandola para mejorar la forma en la que usted agrupa los objetos en su marcado en HTML5.

Este es un curso de nivel principiante, sin embargo, servirá como una actualización útil para otros.

Usos Típicos para <figure>.

Pero primero, veamos lo que el Doctor HTML tiene que decir al respecto:

El elemento figure representa una unidad de contenido, de manera opcional con una leyenda, y que típicamente está mencionada como una sola unidad, desde el flujo principal del documento, y que puede ser alejada del flujo principal del documento sin afectar el significado del documento. -Richard Clark

Así que, el elemento figure especifica un contenido independiente, tal como ilustraciones y fotos. Esto significa que siempre estará usando la etiqueta figure para alojar algo más.

Una idea errónea muy común es que figure puede usarse solamente para imágenes. De hecho, puede ser usada para agrupar cualquier número de cosas diferentes, incluyendo, pero no limitada a; imágenes, vídeos, audios y bloques de códigos.

Definiendo la Estructura de la Página

La etiqueta figure es una sectorización, lo que significa que efectivamente separa su contenido del antecesor de su estructura. Lo que sea que esté dentro de la etiqueta figure no contribuye con el esquema del documento. Se comporta como un elemento de la estructura de la página y, además, puede contener sus propios encabezados, comenzando con una etiqueta <h1> y trabajando bajo la jerarquía a través de <h2>, <h3> y así sucesivamente, pero esta no tiene nada que ver con la jerarquía exterior.

Elementos como esto son a menudo utilizado para introducir contenido externo al documento, como una cita por ejemplo. <fieldset> es otro ejemplo de un elemento de sectorización.

Imágenes

Aquí está un típico ejemplo de cómo la etiqueta figure puede ser usada para mostrar una imagen.

1

<figure>

2

  <img src="your-image.png" alt="Hello world! I am an image." />

3

</figure>

Ahora, puede estar pensando; “¿por qué molestarme en poner mi etiqueta de imagen en otra etiqueta adicional?”. Esa es una excelente pregunta, pero esto comienza a tener sentido una vez que usted se da cuenta de que una etiqueta <figure> puede contener más que un solo elemento, tal como una leyenda.

Además, hay una etiqueta de leyenda para la etiqueta figure, figcaption. Teniendo esto en cuenta, usted sería capaz de usarlo en las siguientes manera.

1

<figure>

2

  <img src="your-image.png" alt="Hello world! I am an image." />

3

  <figcaption>What's up? I am a caption!</figcaption>

4

</figure>

Múltiples imágenes

Usando solamente una serie de elementos img para mostrar imágenes juntas funciona bien, aunque cada imagen debería estar independiente como en su propio bloque de código, completamente sin relacionar con otros elementos. En casos donde las imágenes comparten una relación de algún tipo, bueno, es cuando la etiqueta figure viene al rescate. Éstas tres imágenes están relacionadas y comparten un solo resumen en la etiqueta figcaption.

1

<figure>

2

  <img src="image1.png" alt="Image 1" />

3

  <img src="image2.png" alt="Image 2" />

4

  <img src="image3.png" alt="Image 3" />

5

  <figcaption>Three different images, grouped together as a figure, and being captioned with figcaption.</figcaption>

6

</figure>

Usando <figure> para Bloques de Códigos.

Los elementos figure tiene un talento para la agrupación de elementos en común que no terminan ahí. Quizás quiera agrupar algunos códigos en línea, junto con una leyenda, en un curso, por ejemplo, entonces podría usar figure y figcaption en la siguiente forma:

1

<figure>

2

    <p><code>Life is good, said HTML5 to XHTML.</code></p>

3

    <figcaption>In this code block, we see HTML5 speaking to XHTML.</figcaption>

4

</figure>

figure puede ser usada en esta forma con code, pre y samp, para hacer más fácil la agrupación de bloques de códigos.

En conclusión

¡Eso es todo! Ha aprendido como usar el elemento figure junto con figcaption y otros elementos para agrupar varios objetos juntos. ¿Cómo usa el elemento figure en éste momento? ¿Cambiará como resultado después de haber leído éste consejo rápido? ¡Cuéntenos en los comentarios!