0%

<figcaption> Figure caption

A figure's caption, placed as its first or last child.

By HTML6 (opens in a new tab) · Updated · How we write and check content

<figcaption> gives its parent <figure> a caption or legend. It has to be the figure's first or last child.

Write it like a newspaper photo caption: some context, a credit, or a short explanation. A frequent mistake is a plain <p> under the image, which leaves the caption unconnected to the figure.

The figcaption element definition (opens in a new tab) allows it only as the first or last child of a figure. It belongs inside a figure element.

Syntax

<figure>
  <img src="photo.jpg" alt="Description">
  <figcaption>Caption</figcaption>
</figure>

When to use it

Picture the line printed under a photo in a magazine. It says who or what is shown, maybe a date and place, a photo credit or a license note. For a chart it gives the number and title (Figure 3: Monthly visitors). That text goes in <figcaption>, which can also hold several paragraphs and links, such as a link to the full data source.

Text that replaces the image for people who can't see it belongs in the img alt attribute. Text that introduces a whole section of the page is a heading. Credits for the entire page go in the footer.

One figure, one figcaption. For a gallery with a caption under every photo, give each photo its own figure, and nest them in an outer figure if the group needs a shared caption too. Two figcaptions in one figure fail validation and leave assistive technology unsure which text names the figure.

Live example

Edit the code and watch the preview.

<figure>
  <img src="pancakes.svg" alt="Pancakes with berries" width="400" height="300">
  <figcaption>Photo: Sunday brunch at our club.</figcaption>
</figure>

More examples

Caption with credit and license

This figcaption holds two things: a paragraph of description and a smaller credit line linking to the license. News sites and magazines have trained readers to expect exactly this layout.

<figure>
  <img src="mountains.svg" alt="Snowy peaks above a green valley" width="400" height="200">
  <figcaption>
    <p>The view from the north ridge at dawn.</p>
    <small>Illustration: Jo Park, <a href="/license/">CC BY 4.0</a></small>
  </figcaption>
</figure>

Nested figures in a gallery

Each photo sits in its own figure with its own figcaption. The outer figure puts its shared caption first. Every image is captioned, and no figure has more than one figcaption.

<style>
.gallery figure{display:inline-block;vertical-align:top;margin:0 1em 0 0}
</style>
<figure class="gallery">
  <figcaption>Breakfast menu highlights</figcaption>
  <figure>
    <img src="pancakes.svg" alt="Pancakes with berries" width="200" height="150">
    <figcaption>Berry pancakes</figcaption>
  </figure>
  <figure>
    <img src="cat.svg" alt="Cat-shaped cookie" width="200" height="150">
    <figcaption>Cat cookies</figcaption>
  </figure>
</figure>

Tip: figcaption goes first or last in the figure.

Browser support

All current browsers support figcaption and show it as a plain block. It is visible text right beside the image, so search engines can read it as context. Google's image SEO guidelines (opens in a new tab) list captions as one source of information about images.

Accessibility

Captions are read along with the figure, so keep them short and informative, and do not copy the alt text word for word. The W3C note Understanding Non-text Content (opens in a new tab) covers how captions and alt text differ.

Common mistakes

Wrong

<img src="cat.jpg" alt="A cat">
<figcaption>My cat</figcaption>

Right

<figure>
  <img src="cat.jpg" alt="A ginger cat asleep on a sofa">
  <figcaption>My cat, Milo</figcaption>
</figure>

A figcaption is valid only as a figure's first or last child.

Frequently asked questions

Where can the figcaption go inside a figure?

First or last. A <figcaption> has to be the first or the last child of its <figure>, and each figure gets only one. First puts the caption above the content; last puts it below. Outside a figure it is not allowed. Use a paragraph for other captions, or <caption> for tables.

Can I use figcaption for a table caption?

You can if the table is the only thing in the figure. The better fit is the table's own <caption> element, which has to be its first child. It names the table directly, and screen readers handle that more consistently than a figcaption wrapped around the table. For tables, use the caption element.

Practise it

Related media elements

<img>Displays an image; src and alt required.<picture>Holds several image sources and lets the browser choose one.<source>One alternative file inside picture, audio or video.<track>Adds WebVTT captions, subtitles or chapters to audio and video.<figure>A self-contained image, chart, code listing or quote, optionally captioned.<audio>Plays sound, like music or a podcast episode.<video>Adds a video player.<iframe>Shows another web page inside a frame on yours.<embed>Inserts external content, like a PDF, that the browser or a plugin displays.<object>Embeds an external resource and holds fallback content for it.<canvas>A bitmap surface that JavaScript draws graphics on.<svg>Vector graphics drawn right in the HTML, sharp at any size.<math>Math notation written as MathML markup.<map>Holds the clickable areas that turn an image into an image map.