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...
Si desea saber más, le proponemos el siguiente libro:
couv_RIT35HTM.png
60-signet.svg
Versión impresa
20-ecran_lettre.svg
Versión online
41-logo_abonnement.svg
En ilimitado con la suscripción ENI
130-boutique.svg
En la tienda oficial de ENI
Anterior
El elemento <img>
Siguiente
Insertar un enlace sobre una imagen