Uno dei limiti nelle versioni del markup HTML precedenti alla release 5, era quello di non poter definire, attraverso appositi markup, delle didascalie per le immagini; con HTML5, invece, è disponibile una semantica appositamente dedicata a questo caso particolare, essa prevede di utilizzare l’elemento <figure>, cioè un tag che il manuale ufficiale del W3C definisce "An image used as a figure in a document". Per creare immagini con didascalie in HTML il tag <figure> dovrà essere associato all’elemento <figcaption> nel modo seguente:
<figure>
<img src="img/immagine.png" alt="Questa immagine rappresenta un.." />
<figcaption>
<p>Questa è una didascalia dell'immagine.</p>
</figcaption>
</figure>Come potete notare, l’elemento <figcaption> viene annidato all’interno di <figure> (al cui interno si trova, ovviamente, anche un tag <img>), in questo modo saremo in grado di comunicare al browser che il paragrafo successivo all’immagine corrisponde ad una sua didascalia.
