Elemento figure

Si no sabes lo que es un elemento o cómo debes usarlo, te recomiendo leer el tutorial "Tags y atributos en HTML" que puedes encontrar en la sección de tutoriales HTML.

Descripción

El elemento figure representa a una pieza de documento autocontenido que se utiliza habitualmente para encerrar imágenes, gráficos, tablas de referencia, videos, poemas, fragmentos de código, etc. Ésta, podrían ser acompañada por una leyenda o título (elemento figcaption) que puede usarse para hacer una referencia al fragmento desde alguna otra parte del documento. Además del título opcional, un elemento figure puede contener a otros elementos como imágenes (img), párrafos (p), código de computadora (code), citas (cite), etc.

Ser autocontenido significa que figure tiene cierto grado de independencia del flujo del documento, y su posición relativa al contenido circundante no necesita ser exacta.

Las imágenes ubicadas junto bloques de texto en un períodico contituyen buenos ejemplos de uso apropiado de los elementos figure y figcaption.

Cuando figure tiene unformación que sóle está tangencialmente relacionada al contenido circundante, el elemento aside debería ser utilizado en su lugar, opcionalmente contienendo éste mismo un elemento figure.

Ejemplos

El siguiente ejemplo muestra a un elemento figure que contiene una imagen con su leyenda. Esta es una representación típica de un artículo en un diario o revista, donde las imágenes acompañan habitualmente al texto y proveen información adicional.

En este caso, hemos decidido no utilizar el elemento aside debido a que la información en la imagen suma a la comprensión del contenido del artículo. En otras palabras, tiene relevancia.

<h1>Análisis de uso de los navegadores</h1>
<figure style="float: right">
  <img src="../../../images/browser-statistics.png">
  <figcaption>Gráfico A: Uso de navegadores</figcaption>
</figure>
<p>En la batalla por el dominio del acceso web, el navegador Chrome toma la delantera con más del 40% de los usuarios. Como puedes ver en el gráfico A, esto es casi el doble del uso de su primer competidor, Internet Explorer, el cual toma el segundo lugar con el 24%.</p>
<p>Otros navegadores, que no están presentes en este gráfico, componen la minorçía y tienen combinados, un 14% de los usuarios de computadoras de escritorio a nivel mundial.</p>
<p>En el área de navegadores móviles, el navegador de Android lidera el mercado con un 22.77% de los usuarios, seguido por Chrome con un 16.67% del mercado.</p>

Análisis de uso de los navegadores

Gráfico A: Uso de navegadores

En la batalla por el dominio del acceso web, el navegador Chrome toma la delantera con más del 40% de los usuarios. Como puedes ver en el gráfico A, esto es casi el doble del uso de su primer competidor, Internet Explorer, el cual toma el segundo lugar con el 24%.

Otros navegadores, que no están presentes en este gráfico, componen la minorçía y tienen combinados, un 14% de los usuarios de computadoras de escritorio a nivel mundial.

En el área de navegadores móviles, el navegador de Android lidera el mercado con un 22.77% de los usuarios, seguido por Chrome con un 16.67% del mercado.

Una cosa importante a notar en el ejemplo previo: la referencia hecha en el texto al gráfico es realizada mediante su leyenda (figcaption) en lugar de usar referencias espaciales como "el gráfico a la derecha". Esto provee un grado de independencia que permitirá a los autores, reubicar al elemento figure de acuerdo a las necesidades (por ejemplo, para visualización mejorada del contenido en dispositivos con pantallas reducidas).

Nuestro siguiente ejemplo muestra una estrofa de un poema que es tratado en el texto circundante. Nuevamente, el la referencia se hace a través de la leyenda (figcaption).

<p>Y en la 13<sup>ra</sup> estrofa, podemos ver como el narrador comienza a darse cuenta qué significa realmente la palabra del cuervo.</p>
<figure>
  <p>En esto cavilaba, sentado, sin pronunciar palabra,<br>
    frente al ave cuyos ojos, como-tizones encendidos,<br>
    quemaban hasta el fondo de mi pecho.<br>
    Esto y más, sentado, adivinaba,<br>
    con la cabeza reclinada<br>
    en el aterciopelado forro del cojín<br>
    acariciado por la luz de la lámpara;<br>
    en el forro de terciopelo violeta<br>
    acariciado por la luz de la lámpara<br>
    ¡que ella no oprimiría, ¡ay!, nunca más!
  </p>
  <figcaption><cite>El cuervo</cite> (13<sup>ra</sup> estrofa) por Edgar Allan Poe</figcaption>
</figure>

Y en la 13ra estrofa, podemos ver como el narrador comienza a darse cuenta qué significa realmente la palabra del cuervo.

En esto cavilaba, sentado, sin pronunciar palabra,
frente al ave cuyos ojos, como-tizones encendidos,
quemaban hasta el fondo de mi pecho.
Esto y más, sentado, adivinaba,
con la cabeza reclinada
en el aterciopelado forro del cojín
acariciado por la luz de la lámpara;
en el forro de terciopelo violeta
acariciado por la luz de la lámpara
¡que ella no oprimiría, ¡ay!, nunca más!

El cuervo (13ra estrofa) por Edgar Allan Poe

Ahora, escribiremos una corta biografía de Charles Dickens, y acompañaremos el texto con su retrato. Aunque podríamos estar tentados a utilizar aside debido a la menor relevancia entre figure y el contenido, particularmente en contraste con los dos ejemeplos anteriores, donde el fragmento estaba siendo referenciado desde el texto. Sin embargo, la imagen representa al tema particular que el texto está tratando y esto contituye una buena razón para utilizar al elemento figure por sí solo.

<h1>Charles Dickens</h1>
<figure style="float: right">
  <img src="../../../images/charles-dickens.jpg">
</figure>
<p>Charles John Huffam Dickens fue un destacado escritor y novelista inglés, uno de los más conocidos de la literatura universal, y el más sobresaliente de la era victoriana. Fue maestro del género narrativo, al que imprimió ciertas dosis de humor e ironía, practicando a la vez una aguda crítica social. En su obra destacan las descripciones de gente y lugares, tanto reales como imaginarios.

Charles Dickens

Charles John Huffam Dickens fue un destacado escritor y novelista inglés, uno de los más conocidos de la literatura universal, y el más sobresaliente de la era victoriana. Fue maestro del género narrativo, al que imprimió ciertas dosis de humor e ironía, practicando a la vez una aguda crítica social. En su obra destacan las descripciones de gente y lugares, tanto reales como imaginarios.

El caso anterior también representa un buen ejemplo en el que la leyenda no es necesaria.

Y ahora un último ejemplo, para mostrar un tipo particular de situación donde el uso de figure resultaría inconveniente. Aquí el fragmento de código es presentado de manera tal que se vuelve parte del flujo del texto. Recuerda que se supone que figure es autocontenido y posicionalmente independiente de sus alrededores.

<p>Debes cambiar el dueño del archivo para que el programa pueda abrirlo. puedes hacer esto ejecutando el comando:</p>
<pre><code>sudo chown maras passwords.txt</code></pre>
<p>Un vez hecho esto...</p>

Debes cambiar el dueño del archivo para que el programa pueda abrirlo. puedes hacer esto ejecutando el comando:

sudo chown maras passwords.txt

Un vez hecho esto...

Nota que los fragmentos de código son buenos candidatos para figure. La única razón que impidió la posibilidad de utilizarlo en el ejemplo anterior fue la inclusión del código en el flujo del contenido. En otras palabras, si el fragmento de código es movido a otro lugar, el significado del contenido podría verse comprometido.

Atributos

Atributos globales

Para más información acerca de los atributos globales refiérete a esta lista de atributos gloables en HTML5.

Eventos

Eventos globales

Para más información acerca de los eventos globales refiérete a esta lista de eventos globales en HTML5.