STEP 1 · LEARNHow it works
Group an image and its caption in a figure element. Semantic structure should describe meaning, not visual appearance.
<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.
<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 · APPLYYour exercise
Complete the example. Group an image and its caption in a figure element.
index.htmlHTML
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.