Índice

Los elementos <figure> y <figcaption>

En la sección anterior, tenemos la inserción de imágenes con el elemento HTML dedicado <img>. Este elemento permite insertar imágenes que están en relación directa con el contenido del texto.

El elemento HTML <figure> permite insertar elementos de ilustración, de acompañamiento, que pueden ser independientes del contenido del texto y que, en consecuencia, pueden estar situados aparte, en un anexo, por ejemplo.

El elemento <figcaption> permite indicar una leyenda para el elemento de ilustración. 

Puede situar en el elemento <figure> imágenes con el elemento <img>, lo cual es el uso más extendido, aunque también otros elementos como audio (<audio>), vídeo (<video>), texto, código...

He aquí un ejemplo simple de uso con una imagen, con un poco de formato en CSS.

El código HTML/CSS:

<!DOCTYPE html> 
<html lang="es"> 
<head> 
    <title>Las figuras</title> 
    <meta charset="UTF-8" /> 
    <style> 
    .cuadro { 
        display: inline-block; 
        border: 1px solid #333; 
        padding: 10px; 
        background-color: #eee; 
    }  
    figcaption {   ...