<figure> / <figcaption>

Since:		HTML5（2014）

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

sample_figure_figcaption.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>figure Example</title>
</head>
<body style="margin: 20px;">

  <!-- 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 caption placed before the content -->
  <figure>
    <figcaption>Listing 1: Hello World in JavaScript</figcaption>
    <pre><code>console.log("Hello, World!");</code></pre>
  </figure>

  <!-- Quotation with a caption -->
  <figure>
    <blockquote>
      <p>Everything begins with curiosity.</p>
    </blockquote>
    <figcaption>— Rintaro Okabe (Steins;Gate)</figcaption>
  </figure>

  <!-- SVG with a caption -->
  <figure>
    <svg width="120" height="60" viewBox="0 0 120 60">
      <rect width="120" height="60" rx="8" fill="#4488ff"/>
      <text x="60" y="36" text-anchor="middle" fill="white" font-size="16">SVG</text>
    </svg>
    <figcaption>Figure 2: Blue box drawn with SVG</figcaption>
  </figure>

</body>
</html>

Result

An image and its caption are displayed together. A code block can be captioned the same way.

View sample page

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.

Browser Compatibility

Desktop

Chrome

8 and later ○

7 and earlier ×

Firefox

4 and later ○

3 and earlier ×

Safari

5.1 and later ○

4.1 and earlier ×

Edge

12 and later ○

11 ○

10 ○

9 ○

8 ×

7 ×

6 ×

Opera

11 and later ○

10 and earlier ×

Mobile

iOS Safari

5 and later ○

4 and earlier ×

Android Browser

4.4 and later ○

4 and earlier ×

Chrome Android

Latest ○

Same support as desktop version

Firefox Android

Latest ○

Same support as desktop version

* Version data based on MDN.

Applying to Various Content Types

<figure> can be used for many types of self-contained content, not just images.

<!-- Add a caption to a code block -->
<figure>
  <figcaption>Hello World in JavaScript</figcaption>
  <pre><code>console.log("Hello, World!");</code></pre>
</figure>

<!-- Add a source citation to a blockquote -->
<figure>
  <blockquote>
    <p>Programs must be written for people to read, and only incidentally for machines to execute.</p>
  </blockquote>
  <figcaption>— Harold Abelson, Structure and Interpretation of Computer Programs</figcaption>
</figure>

<!-- Add a caption to a chart -->
<figure>
  <img src="monthly-sales-chart.png" alt="Monthly sales chart for 2024 — August had the highest sales">
  <figcaption>Figure 1: Monthly Sales Trend for FY2024 (in USD thousands)</figcaption>
</figure>

CSS Styling

The default styles of <figure> and <figcaption> can be customized for your design.

/* Reset figure's default margin and format */
figure {
  margin: 1.5em 0;
  padding: 0;
  text-align: center;
}

figure img {
  max-width: 100%; /* responsive */
  height: auto;
  display: block;
  margin: 0 auto;
  border-radius: 4px;
}

/* figcaption styling */
figcaption {
  font-size: 0.875em;
  color: #666;
  margin-top: 0.5em;
  font-style: italic;
}

/* Code block figure styling */
figure.code-block {
  background-color: #f8f8f8;
  border: 1px solid #ddd;
  border-radius: 4px;
  overflow: hidden;
  text-align: left;
}

figure.code-block figcaption {
  background-color: #e8e8e8;
  padding: 0.4em 0.8em;
  font-style: normal;
  font-weight: bold;
  font-size: 0.8em;
  border-bottom: 1px solid #ddd;
  color: #444;
}

If you find any errors or copyright issues, please contact us.

Home

HTML Dictionary