Often you want to show a small caption below an image - like in a newspaper or a book. There are two elements that belong together for this: <figure> and <figcaption>.

The structure

<figure>
  <img src="images/training.jpg" alt="The team training on the pitch">
  <figcaption>Our training session last Tuesday</figcaption>
</figure>

<figure> wraps the image and its caption as one connected unit. <figcaption> holds the caption text and can go before or after the image - most often it goes after.

Why not just a

underneath?

You could also simply write: <img ...><p>Caption</p>. The difference: with <figure>/<figcaption> you explicitly tell the browser and screen readers "this image and this text firmly belong together", not just "there happens to be an image here, and a paragraph happens to come after it". This is an example of semantic HTML - elements that carry real meaning, rather than just an appearance. We'll meet more of that in a later block.

Multiple images in one figure

<figure> can also hold several images sharing one caption:

<figure>
  <img src="images/match.jpg" alt="Finn taking a shot at goal">
  <img src="images/team.jpg" alt="The team after the win">
  <figcaption>Two moments from our last match</figcaption>
</figure>

Finn's first captioned photo

Add a captioned photo to your website:

<h2 id="photos">Photos</h2>
<figure>
  <img src="images/training.jpg" alt="The team training on the pitch" width="500">
  <figcaption>Our training session last Tuesday</figcaption>
</figure>