figure and figcaption: Images and Code with Captions

A figure is a self-contained piece of content that is referred to from the main text, such as an image, a chart or a code example. A figcaption gives it a caption.

1
2
3
4

<figure>
  <img src="https://placehold.co/320x160/f8f2ee/49454f?text=Reading+corner" alt="Armchairs and a lamp in a quiet corner of the shop">
  <figcaption>The reading corner on the first floor.</figcaption>
</figure>

alt versus figcaption

• alt describes the image for someone who cannot see it.
• figcaption is a visible caption that adds context for everyone.

They do different jobs. Do not copy the caption into the alt.

figure for more than pictures

1
2
3
4

<figure>
<pre><code>&lt;p&gt;Hello&lt;/p&gt;</code></pre>
  <figcaption>The simplest paragraph.</figcaption>
</figure>

Where the caption goes

figcaption can be the first or the last child of the figure. Most pages put it last.