Figure and figcaption
Add captions to images with <figure> and <figcaption>.
The figure element
The <figure> element groups a piece of content together with its caption. You can put an image, a video, a code snippet or a quotation inside. The key is that the content is a self-contained unit, not dependent on the surrounding text.
For example, an image and its description in a blog post can be wrapped in figure. In the layout it moves as a whole; even moved elsewhere, it keeps its meaning.
Caption with figcaption
The <figcaption> element adds a caption inside figure. There is only one figcaption per figure; it usually sits just below or just above the image.
The caption briefly says what the image shows: for example Morning hours on the plateau. This text is read as tied to the image, not as a separate paragraph.
Exercise Build a captioned image
Add a <figure> element to body. Inside it, place an <img> (with src and alt) and a <figcaption> (with a short caption text).
Show example solution
<body>
<figure>
<img src="https://example.com/art/statue.jpg" alt="Bronze statue">
<figcaption>A bronze statue from Anatolian civilizations</figcaption>
</figure>
</body>Test yourself
-
Which placement of figure and figcaption is correct?
- figcaption wraps img directly
- figcaption stays outside figure
- figure wraps img and figcaption together
- img stays outside figure
Show answer
figure wraps img and figcaption together — Correct. figure wraps both img and figcaption as one unit.
-
Match each element to its role
- figure
- Groups content with caption
- figcaption
- Carries the caption
- img
- Loads the image
- p
- Text paragraph
-
Close the figcaption tag
<figcaption>A bronze statue from Anatolian civilizations____Show answer
<figcaption>A bronze statue from Anatolian civilizations</figcaption>