HTML figure and figcaption: Group Content and Position Captions

HTML <figure> groups self-contained content such as illustrations, charts, or code into one unit, and <figcaption> supplies its caption. Place a single figcaption as the first or last child of figure; omit it when no caption is needed.

Is figure only for images?

You can use figure for photographs, illustrations, charts, code examples, or quotations that the text refers to as one item. Use div when you only need a styling container, and avoid wrapping an entire related section in figure. Using this element does not automatically verify the material’s copyright or source.

A figcaption describes the other content of its immediate parent figure. Do not place it on its own outside figure or include multiple caption elements in the same figure. If you need explanations for both the top and bottom, gather the necessary information in a single figcaption.

Complete example: put the caption first or last

Save the following code as figures.html and open it in a browser. The example draws simple shapes with SVG (Scalable Vector Graphics) so that it runs without separate image files. The first item has its caption before the graphic; the second has it after the graphic.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Comparing figure caption positions</title>
  <style>
    figure { margin: 1rem 0; max-width: 20rem; }
    svg { display: block; width: 100%; height: auto; }
    figcaption { padding: 0.5rem 0; }
  </style>
</head>
<body>
  <h1>Comparing two shapes</h1>
  <figure>
    <figcaption>Figure A. Blue circle</figcaption>
    <svg viewBox="0 0 240 120" role="img" aria-label="Blue circle centered on a light background">
      <rect width="240" height="120" fill="#f0f3f5" />
      <circle cx="120" cy="60" r="36" fill="#176e96" />
    </svg>
  </figure>
  <figure>
    <svg viewBox="0 0 240 120" role="img" aria-label="Orange square centered on a light background">
      <rect width="240" height="120" fill="#f0f3f5" />
      <rect x="84" y="24" width="72" height="72" fill="#b35a12" />
    </svg>
    <figcaption>Figure B. Orange square</figcaption>
  </figure>
</body>
</html>

The page shows a circle below “Figure A. Blue circle” and “Figure B. Orange square” below a square. When you narrow the window, the SVG scales down to the width of its figure. Compare the caption positions by moving figcaption between the first and last positions inside figure, rather than moving it outside.

Captions and image alternative text have different roles

A figcaption can contain a title, explanation, or source visible to all readers. An image’s alt supplies replacement content for readers who cannot see the image. Do not automatically leave an important image’s alt empty because a caption exists, or duplicate every explanation word for word in both places.

The example uses SVG rather than img, so it provides descriptions of the shapes with role and aria-label. For a photograph inserted with img, specify src and alt along with the necessary dimensions. If a chart communicates numerical comparisons, consider whether a short caption is enough and provide its key data in the text or a table as well.

The figure element does not automatically generate captions or figure numbers, and its default margins depend on the browser and CSS. If numbering is needed, keep it consistent with references in the document. The MDN figure reference and MDN figcaption reference explain the detailed element rules.