<figcaption>

<figcaption> describes the contents of its parent figure. It can name that figure for assistive technology and gives sighted readers visible context.

Caption a sample

This caption describes the code as a unit. It is a direct child of the figure and appears last.

<figure>
  <pre><code>button:focus-visible {
  outline: 3px solid blue;
}</code></pre>
  <figcaption>
    A visible outline helps keyboard users locate the focused button.
  </figcaption>
</figure>

figure {
  margin: 0;
  border: 1px solid #94a3b8;
  padding: 1rem;
}
figcaption {
  margin-top: 0.75rem;
  color: #334155;
}

Placement and content

Use at most one figcaption, as the figure’s first or last child. It accepts flow content, including paragraphs and links when the explanation needs them. It is not valid as a free-standing caption for an arbitrary div or image.

A figure caption and an image’s alternative text do different jobs: the caption adds visible context; alt replaces the image when it cannot be seen. A caption does not automatically make alt unnecessary.

Try a change

Move the caption above the code and remove its color rule. The group remains understandable. Use caption for a table title rather than wrapping a table title in figcaption.

Sources and browser support

MDN: figcaption describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.