References

Beginner-friendly references for web development, with live, editable examples.

The HTML <figcaption> tag

Element All modern browsers Updated
Quick answer

The HTML <figcaption> element provides a caption for its parent <figure>. It must be the figure's first or last child, and it provides the figure's accessible name.

Overview

The <figcaption> element provides a caption or label for a <figure>. Place it as the first or last child of the figure — for a caption above or below the content respectively — and nowhere else.

A caption can do several jobs: number a figure ("Figure 3"), credit a source, or explain what the reader is looking at. Crucially, it provides the figure's accessible name, so assistive technology announces the caption and content together.

That is also why it differs from an image's alt text. The alt attribute describes the image for people who cannot see it; <figcaption> is a visible caption shown to everyone. The two complement each other — a figure with an image usually wants both.

Syntax

<figure>
  <img src="photo.jpg" alt="">
  <figcaption>A sunset over the sea.</figcaption>
</figure>

Example

Live example 
<figure style="margin:0;">
  <img src="https://codeshack.io/web/img/icon.png" alt="" width="56" height="56">
  <figcaption style="font-size:.9rem;color:#64748b;">The CodeShack mark.</figcaption>
</figure>

Best practices

  • Place it as the first or last child of the <figure>, never elsewhere.
  • Use it to caption, number or credit the figure — it is visible to all readers.
  • Keep it distinct from alt text: the caption labels, the alt describes the image.
  • Use only one <figcaption> per figure.

Frequently asked questions

Where does figcaption go?
It must be the first or last child of its <figure> — a caption above or below the content.
What is the difference between figcaption and alt?
A <figcaption> is a visible caption that labels the whole figure; alt is a text alternative that describes an image for people who cannot see it.
Can a figure have more than one figcaption?
No. A figure may contain at most one <figcaption>.
Do I still need alt text if I have a figcaption?
Yes. They serve different purposes — the caption labels the figure, the alt describes the image — so an image inside a figure should still have alt text.
fieldset figure