El elemento figure de visualización de bloque comprende una unidad de contenido que es autónoma, como una imagen, junto con un elemento figcaption opcional.
El elemento figcaption de visualización de bloque proporciona un título para una figura. Los elementos figure y figcaption requieren un navegador moderno que admita HTML5 como Safari, Firefox, Chrome, Opera, Microsoft Edge o Internet Explorer (versión 9 o posterior).
Quizá te preguntes por qué se crearon estos nuevos elementos HTML5 cuando se puede configurar el mismo diseño utilizando un elemento div como un contenedor. La razón es la semántica. El elemento div es útil pero de naturaleza muy genérica. Cuando se utilizan los elementos figure y figcaption, la estructura del contenido está bien definida.
El elemento figure
El elemento <figure> está diseñado para usarse junto con el elemento <figcaption> para marcar diagramas, ilustraciones, fotos y ejemplos de código (entre otras cosas). La especificación de figure dice lo siguiente:
El elemento <figure> representa una unidad de contenido, opcionalmente con una leyenda/subtítulo, que es autónoma, que se refiere típicamente como una sola unidad del flujo principal del documento, y que puede ser alejada del flujo principal del documento sin afectar el significado del documento.
El elemento figcaption
El elemento figcaption ha sido objeto de mucho debate. Inicialmente, la especificación quería reutilizar <legend> en lugar de introducir un nuevo elemento. Otras sugerencias incluyeron <label>, <caption>, <p> o los elementos <h1>-<h6>. La etiqueta <legend> fue cambiada, así que usamos una combinación de <dt> y <dd> dentro de <figure>. La mayoría de estas sugerencias fallaron ya que no había compatibilidad hacia atrás para el estilo con CSS.
Los lectores habituales sabrán que recientemente se ha introducido un nuevo elemento, a saber, <figcaption>. Quién sabe si se mantendrá, pero por ahora esto es lo que dice la especificación al respecto:
El elemento <figcaption> representa una leyenda para una figura.
El elemento <figcaption> es opcional y puede aparecer antes o después del contenido dentro de la <figure>. Sólo se puede anidar un elemento <figcaption> dentro de un elemento <figure>, aunque el propio elemento <figure> puede contener múltiples elementos hijo (por ejemplo, <img> o <code>).
Ejemplos de <figure> y <figcaption>
Para la siguiente práctica, configurarás un área en una página web que contiene una imagen con un título usando los elementos figure y figcaption de HTML5.
<p>Aquí hay una imagen con algún texto de subtítulo.</p>
<figure>
<img src="https://cimage.se/image/example/kodim23.png?width=600&height=200&crop-to-fit" alt="Imagen de un loro" />
<figcaption>
Figura 1: Esta es una simple imagen. Autor: <a href="https://htmldesdecero.es">Aprender HTML desde Cero</a>
</figcaption>
</figure>
<p>Continuará...</p>¡Comparte este artículo!
