HTML Tutorial / Group Images and Captions with figure and figcaption

figure groups self-contained content such as an image, chart, or code sample, and figcaption gives that figure a visible caption. Not every image needs these elements. Use them when the content and its explanation belong together as one unit.

Keep an image and caption together

A travel photo and its location or context can form one figure. Put figcaption as the first or last child of figure.

<figure>
  <img src="lake.webp"
       alt="A mountain ridge beyond a calm lake"
       width="960" height="540">
  <figcaption>The lake in the early morning</figcaption>
</figure>

Place lake.webp beside the HTML file and open the page. The caption appears below the image. To place the caption before it, move figcaption before img. Adjust size and spacing with CSS. If the file is in an images folder, use src="images/lake.webp". The width and height should preserve the real image's aspect ratio and help reserve space while it loads.

Alt text and captions do different jobs

The alt text conveys the image's information or function when the image cannot be perceived. The visible figcaption supplies a title, source, or context for everyone. Repeating exactly the same sentence in both can create redundant reading. In the example, the alt text describes what is visible, while the caption gives the time of day.

For a purely decorative image, consider alt="", but first check that important information is available elsewhere. A chart needs its main trend or result conveyed, not merely the phrase “bar chart.” If its data requires a longer explanation, provide that in nearby text or a table and let the alt text lead readers to it. The W3C WAI alt-text decision tree helps with this choice.

When can you omit figure?

An ordinary image within the flow of a paragraph does not need figure if it has no separate caption or reference. A diagram discussed as “the following figure,” or a code sample with a caption, is a stronger candidate. A figure can contain more than an image. See the MDN figure reference for its content model.

If the result looks wrong

Browsers may add default margins around figure. Check its CSS margin before changing the HTML structure. If the image is missing, check the filename and relative path. If the caption is missing, verify that figcaption is inside figure and the closing tags are present. A caption does not automatically provide appropriate alt text; review both separately.