Figure and Figcaption

Captions (or “cut lines”) are typically placed below an image. Use <figure> and <figcaption> to associate the caption with its content. Although some screen readers may not consistently convey this relationship (as of 2025), the semantic structure is still recommended.

Ensure the image or other referenced content is perceivable to screen reader users; otherwise the caption may not be announced. In some cases, using null alt text (alt="") can also prevent the caption from being read.

Basic pattern:

<figure>
  <img src="image.png" alt="Picture ALT">
  <figcaption>
    Content (any amount of HTML)
  </figcaption>
</figure>

The <figure> element is not limited to images; it can wrap many content types, such as code samples:

<figure>
  <code>Code example goes here</code>
  <figcaption>
    Code description goes here. 
  </figcaption>
</figure>

A figure can contain a wide range of content, including images, code, block quotes, tables, sections, mathematical expressions, embedded objects, and canvas elements—essentially almost any type of content.