Français

<figure>

Link an image or diagram to its description, even when you move it

— 2 min read

  • HTML
  • accessibility
  • semantics
  • structure

<figure> and <figcaption> — Illustrative content

The <figure> element wraps illustrative content (image, diagram, code snippet, video) and <figcaption> gives it a visible caption. Together, they explicitly link an illustration to its description.

When to use it

You want to associate a visible caption with an image, a chart, a code block, or a quotation. The <figure> can be moved around the page without losing its meaning — it is self-contained.

What you gain

Accessibility: the <figcaption> is announced by screen readers as the figure's caption. It complements the image's alt by providing visible context for everyone.

SEO: Google uses surrounding text (including the <figcaption>) to understand the content of an image (Google documentation).

Code example

<figure>
  <img
    src="/images/landmark-tree.svg"
    alt="Diagram showing the landmark tree of a typical web page"
    width="600"
    height="400"
  >
  <figcaption>
    The landmark tree: banner, navigation, main, and contentinfo.
  </figcaption>
</figure>

Further reading