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>

Next lesson: Audio and video

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies