Tag HTML <figcaption>

Il tag <figcaption> è uno degli elementi HTML5. Definisce una didascalia o una descrizione per il contenuto di un elemento <figure>. Deve essere il primo o l'ultimo figlio di <figure>. Come primo figlio, visualizza la didascalia sopra il contenuto della figura; come ultimo figlio, la visualizza sotto.

Un <figure> può contenere un solo <figcaption>, ma la figura stessa può racchiudere molti tipi di contenuto autonomo: un <img>, un elenco <code>, una <table>, un <blockquote>, un grafico e altro ancora.

Perché usare `<figcaption>` invece di un `<p>`?

Si potrebbe inserire un <p> accanto a un'immagine e visivamente sembrerebbe uguale. La differenza è semantica e conta soprattutto per l'accessibilità.

Quando una didascalia è contrassegnata come <figcaption> all'interno di un <figure>, il browser associa programmaticamente la didascalia alla figura. Le tecnologie assistive come i lettori di schermo annunciano entrambi insieme — l'utente sente che il contenuto è una figura e sente la sua didascalia come etichetta. Un semplice <p> è solo testo non correlato che si trova nelle vicinanze; nulla indica alla macchina che appartiene all'immagine.

Quindi usa <figure> + <figcaption> ogni volta che la didascalia fa parte del contenuto (e ti aspetti che si spostino insieme se la pagina venisse ridisposta). Usa un semplice <p> per il testo di paragrafo ordinario.

Sintassi

Il tag <figcaption> è composto da una coppia di tag. Il contenuto è scritto tra il tag di apertura <figcaption> e quello di chiusura (</figcaption>), e l'elemento vive all'interno di un <figure>:

<figure>
  <!-- figure content, e.g. an image, code block, or table -->
  <figcaption>Caption text</figcaption>
</figure>

Esempio del tag HTML `<figcaption>`:

Tag HTML <figcaption>

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p>Image of a baby</p>
    <figure>
      <img src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="A Cute Baby" width="250" height="200" />
      <figcaption>Fig.1 – Cute baby</figcaption>
    </figure>
  </body>
</html>

Provalo tu stesso »

Risultato

Didascalia prima o didascalia dopo

Sposta il <figcaption> per controllare dove appare la didascalia. Non cambia nient'altro — solo la sua posizione tra i figli della figura.

Didascalia sotto l'immagine (ultimo figlio):

<figure>
  <img src="diagram.png" alt="Request flow diagram" width="400" height="250" />
  <figcaption>Fig.1 – How a request travels through the app.</figcaption>
</figure>

Didascalia sopra l'immagine (primo figlio):

<figure>
  <figcaption>Fig.1 – How a request travels through the app.</figcaption>
  <img src="diagram.png" alt="Request flow diagram" width="400" height="250" />
</figure>

Usare `<figcaption>` oltre le immagini

Un <figure> è per qualsiasi unità autonoma che si potrebbe voler didascaliare — non è limitato alle immagini.

Didascalia per un listato di codice

Racchiudi un blocco <pre> / <code> in modo che il listato e la sua etichetta siano collegati insieme:

<figure>
  <figcaption>Listing 1 – A minimal "Hello, world" in JavaScript.</figcaption>
  <pre><code>console.log("Hello, world!");</code></pre>
</figure>

Didascalia per una tabella

<figure>
  <figcaption>Table 1 – HTTP status codes used by the API.</figcaption>
  <table>
    <tr><th>Code</th><th>Meaning</th></tr>
    <tr><td>200</td><td>OK</td></tr>
    <tr><td>404</td><td>Not Found</td></tr>
  </table>
</figure>

Nota: una <table> dispone di un proprio elemento di didascalia integrato, <caption>, che è la scelta più convenzionale per una singola tabella di dati. Usa <figure>/<figcaption> quando la tabella è una delle tante figure con didascalia in un documento, o quando vuoi un'etichetta in stile "Tabella 1" che si legga come una figura.

Didascalia per una citazione

<figure>
  <blockquote>
    <p>The best way to predict the future is to invent it.</p>
  </blockquote>
  <figcaption>— Alan Kay</figcaption>
</figure>

Consulta il tag <blockquote> per ulteriori informazioni sulla citazione di fonti esterne.

Accessibilità: `alt` non è un `figcaption`

È facile confondere l'attributo alt di un'immagine con un <figcaption>, ma servono a scopi diversi e non devono duplicarsi a vicenda:

alt è il testo alternativo dell'immagine. Sostituisce l'immagine quando non può essere vista (collegamento interrotto, connessione lenta o utente non visivo). Descrive ciò che l'immagine mostra. Un lettore di schermo lo legge al posto dell'immagine.
<figcaption> è una didascalia — informazioni supplementari sulla figura che anche un lettore vedente vede. Spesso aggiunge contesto che l'immagine da sola non trasmette ("Fig.1 – Le vendite sono cresciute del 20% anno su anno").

Entrambi possono essere applicati alla stessa figura contemporaneamente:

<figure>
  <img src="chart.png" alt="Bar chart of quarterly sales rising each quarter" />
  <figcaption>Fig.2 – Quarterly sales, 2025.</figcaption>
</figure>

Qui alt descrive il visual ("un grafico a barre in crescita ogni trimestre") affinché gli utenti non visivi ottengano i dati, mentre il <figcaption> aggiunge l'etichetta che tutti leggono. Mantieni alt non vuoto e descrittivo anche quando è presente una didascalia.

Attributi

Il tag <figcaption> supporta gli Attributi Globali e gli Attributi degli Eventi.

Come applicare stili a un tag HTML <figcaption>

Per impostazione predefinita, i browser rendono l'elemento <figcaption> come un elemento a livello di blocco. Puoi personalizzarne l'aspetto usando CSS:

figcaption {
  font-style: italic;
  color: gray; /* muted text so the caption reads as secondary */
  text-align: center;
  margin-top: 5px;
}

Un esempio completo ed eseguibile, che applica stili alla didascalia e dà alla figura una cornice sottile:

<!DOCTYPE html>
<html>
  <head>
    <title>Styled figcaption</title>
    <style>
      figure {
        border: 1px solid lightgray;
        padding: 10px;
        display: inline-block;
        text-align: center;
      }
      figcaption {
        font-style: italic;
        color: gray;
        margin-top: 5px;
      }
    </style>
  </head>
  <body>
    <figure>
      <img src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="A cute baby" width="250" height="200" />
      <figcaption>Fig.1 – Cute baby</figcaption>
    </figure>
  </body>
</html>

Esercitazione

Pratica

Qual è la funzione del tag HTML <figcaption>?

Associare programmaticamente una didascalia a un elemento <figure>Aggiungere didascalie solo alle immagini, mai ad altri contenutiFornire un'intestazione per una sezione o una paginaCreare punti elenco in un elenco

Perché usare <figcaption> invece di un <p>?