LESSON 31 OF 120

Build: an image with a caption

Group an image and its caption in a figure element.

Official sourceWHATWG HTML — figureReviewed: 2026-08-26
STEP 1 · LEARN

How it works

Group an image and its caption in a figure element. Semantic structure should describe meaning, not visual appearance.

Correct example
<figure><img src="diagram.png" alt="Stages of building a website"><figcaption>From analysis to launch.</figcaption></figure>

figure groups self-contained content with its caption. figcaption supplies the caption and alt describes the image when it cannot be seen.

Common mistake
<figure><img src="diagram.png"></figure>

The image has no alt and the figure has no figcaption. The grouping exists, but the necessary information is missing.

STEP 2 · APPLY

Your exercise

Complete the example. Group an image and its caption in a figure element.

STEP 3 · BUILD

Write and see the result

index.htmlHTML
Safe resultisolated
The draft stays only in this browser.HTML and CSS allowed · scripts and network blocked
STEP 4 · CHECK

What needs to pass

0%not checked
  • figure contains an image with alt.
  • The image has a visible figcaption.
Explain the solution logic

Place the image and caption in the same figure, complete alt and put the caption text in figcaption.