<figure> / <figcaption>

The figure element groups self-contained content such as images, illustrations, and code blocks. The figcaption element provides a caption for that content.

Syntax

<figure>
  <img src="photo.jpg" alt="Photo of Mount Fuji">
  <figcaption>Mount Fuji (elevation: 3,776 m)</figcaption>
</figure>

Tag List

Tag	Description
figure	Groups self-contained content — such as images, diagrams, code blocks, or quotations — that is referenced from the main text but can stand independently.
figcaption	Provides a caption for the content inside a `figure` element. It must be placed as the first or last child of `figure`.

Sample Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>figure Example</title>
  <style>
    figure {
      display: inline-block;
      border: 1px solid #ccc;
      padding: 8px;
      margin: 16px;
      text-align: center;
    }
    figcaption {
      font-size: 0.85em;
      color: #555;
      margin-top: 4px;
    }
  </style>
</head>
<body>

  <!-- Image with a caption -->
  <figure>
    <img src="mountain.jpg" alt="Photo of a mountain" width="300">
    <figcaption>Figure 1: Mountain scenery (taken in 2024)</figcaption>
  </figure>

  <!-- Code block with a caption -->
  <figure>
    <pre><code>console.log("Hello, World!");</code>

Listing 1: Hello World in JavaScript

</body> </html>

Result

An image and its caption are displayed inside a bordered box. A code block can be captioned the same way.

┌──────────────────────────┐
│  [mountain.jpg image]    │
│  Figure 1: Mountain (2024) │
└──────────────────────────┘

┌──────────────────────────────────────┐
│  console.log("Hello, World!");       │
│  Listing 1: Hello World in JavaScript │
└──────────────────────────────────────┘

Notes

Use the figure element for self-contained content that is referenced from the main flow but can be moved to a different location — such as an appendix — without affecting the surrounding text. It is not limited to images; diagrams, code blocks, and quotations are all valid uses.

Only one figcaption may appear inside a figure, and it must be the first or last child element. Omitting figcaption is valid HTML, but adding a caption to meaningful images improves accessibility.

If you simply need to display an image, the img element alone is sufficient. Use figure together with figcaption when you want to treat the content as a labeled figure or need to attach a caption.