HTML figure e figcaption: raggruppare contenuti e didascalie

HTML <figure> raggruppa contenuti autonomi come illustrazioni, grafici o codice in un'unica unità, e <figcaption> fornisce la sua didascalia. Posiziona un singolo figcaption come primo o ultimo figlio di figure; omettelo quando non è necessaria alcuna didascalia.

figure serve solo per le immagini?

Puoi usare figure per fotografie, illustrazioni, grafici, esempi di codice o citazioni a cui il testo fa riferimento come a un unico elemento. Usa div quando hai bisogno solo di un contenitore di stile ed evita di racchiudere un'intera sezione correlata in figure. L'uso di questo elemento non verifica automaticamente il copyright o la fonte del materiale.

figcaption descrive il resto del contenuto del suo genitore diretto figure. Deve rimanere all’interno di figure, con al massimo un figcaption per figure. Se servono spiegazioni per la parte superiore e quella inferiore, riuniscile in un unico figcaption.

Esempio completo: inserire la didascalia prima o dopo

Salva il seguente codice come figures.html e aprilo in un browser. L'esempio disegna forme semplici con SVG (Scalable Vector Graphics) in modo che funzioni senza file immagine separati. Il primo elemento ha la didascalia prima della grafica; il secondo l’ha dopo la grafica.

<!doctype html>
<html lang="it">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Confronto delle posizioni delle didascalie di figure</title>
  <style>
    figure { margin: 1rem 0; max-width: 20rem; }
    svg { display: block; width: 100%; height: auto; }
    figcaption { padding: 0.5rem 0; }
  </style>
</head>
<body>
  <h1>Confronto fra due forme</h1>
  <figure>
    <figcaption>Figura A. Cerchio blu</figcaption>
    <svg viewBox="0 0 240 120" role="img" aria-label="Cerchio blu al centro di uno sfondo chiaro">
      <rect width="240" height="120" fill="#f0f3f5" />
      <circle cx="120" cy="60" r="36" fill="#176e96" />
    </svg>
  </figure>
  <figure>
    <svg viewBox="0 0 240 120" role="img" aria-label="Quadrato arancione al centro di uno sfondo chiaro">
      <rect width="240" height="120" fill="#f0f3f5" />
      <rect x="84" y="24" width="72" height="72" fill="#b35a12" />
    </svg>
    <figcaption>Figura B. Quadrato arancione</figcaption>
  </figure>
</body>
</html>

«Figura A. Cerchio blu» appare sopra il cerchio e «Figura B. Quadrato arancione» sotto il quadrato. Restringendo la finestra, l’SVG si riduce alla larghezza di figure. Confronta le posizioni spostando figcaption all’inizio o alla fine di figure, senza portarlo fuori da questo elemento.

Le didascalie e il testo alternativo delle immagini hanno ruoli diversi

Un figcaption può contenere un titolo, una spiegazione o una fonte visibile a tutti i lettori. L’attributo alt di un’immagine fornisce un contenuto alternativo a chi non può vederla. Non lasciare automaticamente vuoto questo attributo per un’immagine importante solo perché esiste una didascalia e non ripetere ogni spiegazione parola per parola in entrambi i posti.

L'esempio utilizza SVG invece di img, quindi fornisce descrizioni delle forme con role e aria-label. Per una fotografia inserita con img, specifica src e alt insieme alle dimensioni necessarie. Se un grafico comunica confronti numerici, valuta se una didascalia breve sia sufficiente e fornisci i dati principali anche nel testo o in una tabella.

L’elemento figure non genera automaticamente didascalie o numeri delle figure, e i suoi margini predefiniti dipendono dal browser e dal CSS. Se serve una numerazione, mantienila coerente con i riferimenti nel documento. I riferimenti di figure su MDN e di figcaption su MDN spiegano le regole dettagliate degli elementi.