La etiqueta figure HTML5 sirve para especificar ilustraciones, diagramas, fotos, imágenes o fragmentos de código dentro de la información que se ofrece en la página.
Este contenido especificado puede ser independiente en cuanto a posición en la web pero relacionado con la información principal mostrada.
Ls definición de la web oficial dice:
The figure element represents a unit of content, optionally with a caption, that is self-contained, that is typically referenced as a single unit from the main flow of the document, and that can be moved away from the main flow of the document without affecting the document’s meaning.
Se puede combinar con la etiqueta figcaption. Otro elemento interesante es la etiqueta template.
La sintaxis de esta nueva etiqueta HTML5 es la siguiente:
<figure> Código HTML5 del contenido especificado </figure>
Tal y como veis la sintaxis es sencilla, se trata de englobar el código de las ilustraciones, diagramas, fotos, imágenes o fragmentos de código.
Un sencillo ejemplo para despecificar una imagen dentro de la etiqueta figure es el siguiente:
<figure>
<img src="urldelaimagen.jpg" alt="Texto alternativo" width="XXX" height="XXX">
<figcaption>Texto explicativo de la imagen<figcaption>
</figure> Tal y como veis también he añadido en el ejemplo la etiqueta figcaption para añadir una leyenda.
En el siguiente post tenemos un listado de estas etiquetas: