Path // www.yourhtmlsource.com → Reference → <figure>

<figure>

The <figure> element represents self-contained content, potentially with an optional caption specified using the <figcaption> element. The figure, its caption, and its contents are referenced as a single unit. Common uses include images, illustrations, diagrams, code snippets, poems, or any content that is referenced from the main flow but could be moved elsewhere without affecting the document's meaning.

Page Navigation:
Syntax | Attributes | Examples | When to Use | Related Elements

This page was last updated on 2025-11-17

Syntax

<figure>
<img src="image.jpg" alt="Description">
<figcaption>Caption text</figcaption>
</figure>

The element requires both opening and closing tags. A figure can contain any flow content, optionally including a single <figcaption> element as either the first or last child. The figcaption provides the caption or legend for the figure's content.

Attributes

Global attributes - The <figure> element supports all global attributes such as id, class, style, lang, and dir.

The <figure> element has no element-specific attributes. The optional <figcaption> child element also only accepts global attributes.

Examples

Image with Caption

<figure>
<img src="sunset.jpg" alt="Sunset over the ocean">
<figcaption>Fig. 1: A beautiful sunset captured at Bondi Beach.</figcaption>
</figure>

Code Listing

<figure>
  <pre><code>
  function greet(name) {
    return `Hello, ${name}!`;
  }
  </code></pre>
  <figcaption>Listing 1: A simple greeting function in JavaScript.</figcaption>
</figure>

Multiple Images in One Figure

<figure>
  <img src="before.jpg" alt="Room before renovation">
  <img src="after.jpg" alt="Room after renovation">
  <figcaption>Before and after: The living room transformation.</figcaption>
</figure>

When to Use

Use the <figure> element when:

Content is referenced from the main text but is self-contained
Adding images, diagrams, or illustrations with captions
Presenting code examples or listings that need captions
Including poems, quotes, or other content that could be moved to an appendix
Creating a gallery of related images with a single caption
Content that could be repositioned without losing meaning

Do NOT use <figure> when:

The image is purely decorative (just use img without figure)
Content cannot be moved without affecting document flow
You just need to add an image inline with text (use img directly)
The content doesn't relate to the main content as a referenced unit

Important: The key characteristic of a figure is that it could be moved away from the main flow (like to an appendix or sidebar) without affecting the document's meaning. Think of figures like illustrations in a book that are numbered and referenced.