I tag figure e figcaption in HTML

I tag <figure> e <figcaption> vengono usati nel codice HTML per inserire un’immagine e la sua descrizione all’interno di una pagina web.

L’elemento figure crea un contenitore, o sezione, personalizzabile dove all’interno viene inserita l’immagine con la relativa didascalia. Ha sia un tag di apertura che uno di chiusura.

<figure>
 ...
</figure>

Come altri tipi di sezioni, come div, article e altri, anche questo elemento può essere personalizzato tramite le regole del linguaggio CSS: si possono aggiungere i bordi e modificare la sua posizione rispetto al resto del contenuto.

All’interno di questo tag verrà inserito un tag vuoto <img>, quindi senza tag di chiusura, dove verranno indicati la fonte dell’immagine, il testo alternativo che viene letto dai programmi che leggono il testo di un sito e altre informazioni facoltative.

Segue poi l’elemento figcaption che serve ad inserire una breve descrizione dell’immagine mostrata. Anche questo elemento può essere personalizzato tramite il foglio di stile.

<figure>
  <img src="foto.jpg" alt="foto" style="width:100%">
  <figcaption>Esempio di una foto</figcaption>
</figure>

Segue sotto un esempio di come personalizzare i vari elementi con il codice CSS.

figure {
  border: 1px #gray solid;
  padding: 6px;
  margin: auto;
}

figcaption {
  font-style: italic;
  padding: 3px;
  text-align: center;
}