<figcaption> - Figure Caption

The `<figcaption>` Element

Block-level HTML5

The <figcaption> element represents a caption or legend for the content of its parent <figure> element. It provides a description, title, or attribution for figures like images, diagrams, code snippets, or other self-contained content.

Quick Example

<figure>
<img src="https://via.placeholder.com/400x250" alt="City skyline">
<figcaption>Downtown skyline at dusk, taken from the waterfront.</figcaption>
</figure>

Result

Interactive code playground requires JavaScript. Here's the code:

<figure>
<img src="https://via.placeholder.com/400x250" alt="City skyline">
<figcaption>Downtown skyline at dusk, taken from the waterfront.</figcaption>
</figure>

Syntax

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

The <figcaption> must be the first or last child of a <figure> element.

Attributes

The <figcaption> element supports all global attributes like id, class, style, and lang.

<figcaption id="caption-1" class="image-caption">
  Caption text
</figcaption>

Common Use Cases

Image Caption

<figure>
<img src="https://via.placeholder.com/400x300" alt="Mountain landscape">
<figcaption>The Rocky Mountains in autumn, Colorado</figcaption>
</figure>

Result

Interactive code playground requires JavaScript. Here's the code:

<figure>
<img src="https://via.placeholder.com/400x300" alt="Mountain landscape">
<figcaption>The Rocky Mountains in autumn, Colorado</figcaption>
</figure>

Code Listing

<figure>
<pre><code>function calculateTotal(items) {
return items.reduce((sum, item) => sum + item.price, 0);
}</code></pre>
<figcaption>Listing 1: Calculate total price from array of items</figcaption>
</figure>

Result

Interactive code playground requires JavaScript. Here's the code:

<figure>
<pre><code>function calculateTotal(items) {
return items.reduce((sum, item) => sum + item.price, 0);
}</code></pre>
<figcaption>Listing 1: Calculate total price from array of items</figcaption>
</figure>

Numbered Figures

<figure>
<img src="https://via.placeholder.com/350x200" alt="Diagram">
<figcaption><strong>Figure 3.1:</strong> System architecture overview</figcaption>
</figure>

Result

Interactive code playground requires JavaScript. Here's the code:

<figure>
<img src="https://via.placeholder.com/350x200" alt="Diagram">
<figcaption><strong>Figure 3.1:</strong> System architecture overview</figcaption>
</figure>

Photo Attribution

<figure>
<img src="https://via.placeholder.com/400x250" alt="Sunset over ocean">
<figcaption>
  Photo by Jane Photographer •
  <a href="https://example.com">View portfolio</a>
</figcaption>
</figure>

Result

Interactive code playground requires JavaScript. Here's the code:

<figure>
<img src="https://via.placeholder.com/400x250" alt="Sunset over ocean">
<figcaption>
  Photo by Jane Photographer •
  <a href="https://example.com">View portfolio</a>
</figcaption>
</figure>

Chart Caption

<figure>
<img src="https://via.placeholder.com/400x300" alt="Bar chart">
<figcaption>
  Chart 1: Monthly sales revenue, January-December 2025<br>
  <small>Source: Annual Financial Report</small>
</figcaption>
</figure>

Result

Interactive code playground requires JavaScript. Here's the code:

<figure>
<img src="https://via.placeholder.com/400x300" alt="Bar chart">
<figcaption>
  Chart 1: Monthly sales revenue, January-December 2025<br>
  <small>Source: Annual Financial Report</small>
</figcaption>
</figure>

Caption Placement

Caption Below Content (Most Common)

<figure>
<img src="https://via.placeholder.com/300x200" alt="Product">
<figcaption>Our flagship product in action</figcaption>
</figure>

Result

Interactive code playground requires JavaScript. Here's the code:

<figure>
<img src="https://via.placeholder.com/300x200" alt="Product">
<figcaption>Our flagship product in action</figcaption>
</figure>

Caption Above Content

<figure>
<figcaption>Figure 2: User interface mockup</figcaption>
<img src="https://via.placeholder.com/400x250" alt="UI mockup">
</figure>

Result

Interactive code playground requires JavaScript. Here's the code:

<figure>
<figcaption>Figure 2: User interface mockup</figcaption>
<img src="https://via.placeholder.com/400x250" alt="UI mockup">
</figure>

Styling Figcaptions

Basic Styling

<style>
figure {
  margin: 1.5rem 0;
}
figcaption {
  margin-top: 0.75rem;
  font-style: italic;
  color: #6b7280;
  font-size: 0.9rem;
  text-align: center;
}
</style>

<figure>
<img src="https://via.placeholder.com/350x200" alt="Example">
<figcaption>A centered, italicized caption in gray</figcaption>
</figure>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
figure {
  margin: 1.5rem 0;
}
figcaption {
  margin-top: 0.75rem;
  font-style: italic;
  color: #6b7280;
  font-size: 0.9rem;
  text-align: center;
}
</style>

<figure>
<img src="https://via.placeholder.com/350x200" alt="Example">
<figcaption>A centered, italicized caption in gray</figcaption>
</figure>

Bordered Caption

<style>
.bordered-caption figcaption {
  border-top: 2px solid #e5e7eb;
  padding-top: 0.75rem;
  margin-top: 0.75rem;
  color: #4b5563;
}
</style>

<figure class="bordered-caption">
<img src="https://via.placeholder.com/350x200" alt="Photo">
<figcaption>Caption separated with a border line</figcaption>
</figure>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
.bordered-caption figcaption {
  border-top: 2px solid #e5e7eb;
  padding-top: 0.75rem;
  margin-top: 0.75rem;
  color: #4b5563;
}
</style>

<figure class="bordered-caption">
<img src="https://via.placeholder.com/350x200" alt="Photo">
<figcaption>Caption separated with a border line</figcaption>
</figure>

Background Caption

<style>
.bg-caption {
  text-align: center;
}
.bg-caption figcaption {
  background: #f3f4f6;
  padding: 0.75rem 1rem;
  margin-top: 0;
  font-size: 0.9rem;
  color: #1f2937;
}
</style>

<figure class="bg-caption">
<img src="https://via.placeholder.com/350x200" alt="Image">
<figcaption>Caption with background color</figcaption>
</figure>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
.bg-caption {
  text-align: center;
}
.bg-caption figcaption {
  background: #f3f4f6;
  padding: 0.75rem 1rem;
  margin-top: 0;
  font-size: 0.9rem;
  color: #1f2937;
}
</style>

<figure class="bg-caption">
<img src="https://via.placeholder.com/350x200" alt="Image">
<figcaption>Caption with background color</figcaption>
</figure>

Overlay Caption

<style>
.overlay-caption {
  position: relative;
  display: inline-block;
}
.overlay-caption img {
  display: block;
}
.overlay-caption figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 0.75rem;
  margin: 0;
}
</style>

<figure class="overlay-caption">
<img src="https://via.placeholder.com/350x250" alt="Photo">
<figcaption>Caption overlaid on image</figcaption>
</figure>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
.overlay-caption {
  position: relative;
  display: inline-block;
}
.overlay-caption img {
  display: block;
}
.overlay-caption figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 0.75rem;
  margin: 0;
}
</style>

<figure class="overlay-caption">
<img src="https://via.placeholder.com/350x250" alt="Photo">
<figcaption>Caption overlaid on image</figcaption>
</figure>

Numbered Style

<style>
.numbered-caption figcaption {
  counter-increment: figure;
  color: #1f2937;
  font-weight: 500;
  margin-top: 0.75rem;
}
.numbered-caption figcaption::before {
  content: "Figure " counter(figure) ": ";
  font-weight: 700;
  color: #3b82f6;
}
</style>

<div style="counter-reset: figure;">
<figure class="numbered-caption">
  <img src="https://via.placeholder.com/300x180" alt="Diagram 1">
  <figcaption>System overview diagram</figcaption>
</figure>

<figure class="numbered-caption">
  <img src="https://via.placeholder.com/300x180" alt="Diagram 2">
  <figcaption>Detailed component structure</figcaption>
</figure>
</div>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
.numbered-caption figcaption {
  counter-increment: figure;
  color: #1f2937;
  font-weight: 500;
  margin-top: 0.75rem;
}
.numbered-caption figcaption::before {
  content: "Figure " counter(figure) ": ";
  font-weight: 700;
  color: #3b82f6;
}
</style>

<div style="counter-reset: figure;">
<figure class="numbered-caption">
  <img src="https://via.placeholder.com/300x180" alt="Diagram 1">
  <figcaption>System overview diagram</figcaption>
</figure>

<figure class="numbered-caption">
  <img src="https://via.placeholder.com/300x180" alt="Diagram 2">
  <figcaption>Detailed component structure</figcaption>
</figure>
</div>

Caption Content Patterns

Simple Text

<figure>
<img src="https://via.placeholder.com/350x200" alt="Landscape">
<figcaption>Sunset over the mountains</figcaption>
</figure>

Result

Interactive code playground requires JavaScript. Here's the code:

<figure>
<img src="https://via.placeholder.com/350x200" alt="Landscape">
<figcaption>Sunset over the mountains</figcaption>
</figure>

With Emphasis

<figure>
<img src="https://via.placeholder.com/350x200" alt="Product">
<figcaption>
  <strong>New Release:</strong> Premium Edition with enhanced features
</figcaption>
</figure>

Result

Interactive code playground requires JavaScript. Here's the code:

<figure>
<img src="https://via.placeholder.com/350x200" alt="Product">
<figcaption>
  <strong>New Release:</strong> Premium Edition with enhanced features
</figcaption>
</figure>

With Links

<figure>
<img src="https://via.placeholder.com/350x200" alt="Chart">
<figcaption>
  Q4 Performance Metrics •
  <a href="#full-report">View Full Report</a>
</figcaption>
</figure>

Result

Interactive code playground requires JavaScript. Here's the code:

<figure>
<img src="https://via.placeholder.com/350x200" alt="Chart">
<figcaption>
  Q4 Performance Metrics •
  <a href="#full-report">View Full Report</a>
</figcaption>
</figure>

Multi-line Caption

<figure>
<img src="https://via.placeholder.com/350x200" alt="Historical photo">
<figcaption>
  <strong>Figure 1:</strong> Historical city center, circa 1920<br>
  <small>Courtesy of City Archives, photo ID: 1920-CH-042</small><br>
  <small>Photographer unknown</small>
</figcaption>
</figure>

Result

Interactive code playground requires JavaScript. Here's the code:

<figure>
<img src="https://via.placeholder.com/350x200" alt="Historical photo">
<figcaption>
  <strong>Figure 1:</strong> Historical city center, circa 1920<br>
  <small>Courtesy of City Archives, photo ID: 1920-CH-042</small><br>
  <small>Photographer unknown</small>
</figcaption>
</figure>

Code Example Caption

<figure>
<pre style="background: #1e293b; color: #e2e8f0; padding: 1rem; border-radius: 4px;"><code>const sum = (a, b) => a + b;</code></pre>
<figcaption style="font-family: monospace; font-size: 0.85rem; color: #6b7280; margin-top: 0.5rem;">
  example-1.js - Basic arrow function
</figcaption>
</figure>

Result

Interactive code playground requires JavaScript. Here's the code:

<figure>
<pre style="background: #1e293b; color: #e2e8f0; padding: 1rem; border-radius: 4px;"><code>const sum = (a, b) => a + b;</code></pre>
<figcaption style="font-family: monospace; font-size: 0.85rem; color: #6b7280; margin-top: 0.5rem;">
  example-1.js - Basic arrow function
</figcaption>
</figure>

Accessibility

Descriptive Captions

Provide meaningful context in captions:

Good
Less Helpful

<figure>
  <img src="process.png" alt="Flowchart with 5 steps">
  <figcaption>
    Figure 2: User registration process showing email verification,
    profile creation, and welcome email steps
  </figcaption>
</figure>

<figure>
  <img src="process.png" alt="Flowchart">
  <figcaption>Diagram</figcaption>
</figure>

Caption vs Alt Text

The caption and alt text serve different purposes:

<figure>
<img
  src="https://via.placeholder.com/350x200"
  alt="Golden retriever puppy sitting in grass">
<figcaption>Max, our newest family member, age 8 weeks</figcaption>
</figure>

<!--
Alt text: Describes what's in the image
Caption: Provides context, identification, or attribution
-->

Result

Interactive code playground requires JavaScript. Here's the code:

<figure>
<img
  src="https://via.placeholder.com/350x200"
  alt="Golden retriever puppy sitting in grass">
<figcaption>Max, our newest family member, age 8 weeks</figcaption>
</figure>

<!--
Alt text: Describes what's in the image
Caption: Provides context, identification, or attribution
-->

Screen readers announce captions as part of the figure:

<!-- Screen reader: "Figure. [Image description]. Caption: Photo taken in Paris, 2025" -->
<figure>
  <img src="paris.jpg" alt="Eiffel Tower at night">
  <figcaption>Photo taken in Paris, 2025</figcaption>
</figure>

Best Practices

<figure>
  <img src="image.jpg" alt="Description">
  <figcaption>Single caption for this figure</figcaption>
</figure>

<figure>
  <img src="image.jpg" alt="Description">
  <figcaption>First caption</figcaption>
  <figcaption>Second caption</figcaption> <!-- Invalid: only one allowed -->
</figure>

Must Be Inside Figure

Good
Invalid

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

<figure>
  <img src="image.jpg" alt="Description">
</figure>
<figcaption>Caption outside figure</figcaption> <!-- Invalid -->

Optional But Recommended

<!-- Valid: Figure without caption -->
<figure>
<img src="https://via.placeholder.com/300x180" alt="Decorative pattern">
</figure>

<!-- Better: Figure with caption -->
<figure>
<img src="https://via.placeholder.com/300x180" alt="Geometric pattern">
<figcaption>Abstract geometric pattern design</figcaption>
</figure>

Result

Interactive code playground requires JavaScript. Here's the code:

<!-- Valid: Figure without caption -->
<figure>
<img src="https://via.placeholder.com/300x180" alt="Decorative pattern">
</figure>

<!-- Better: Figure with caption -->
<figure>
<img src="https://via.placeholder.com/300x180" alt="Geometric pattern">
<figcaption>Abstract geometric pattern design</figcaption>
</figure>

Advanced Examples

Interactive Caption

<figure>
<img src="https://via.placeholder.com/350x200" alt="Infographic">
<figcaption>
  <details>
    <summary>View image details</summary>
    <p>Created: December 2025 | Format: PNG | Size: 1200x800px</p>
  </details>
</figcaption>
</figure>

Result

Interactive code playground requires JavaScript. Here's the code:

<figure>
<img src="https://via.placeholder.com/350x200" alt="Infographic">
<figcaption>
  <details>
    <summary>View image details</summary>
    <p>Created: December 2025 | Format: PNG | Size: 1200x800px</p>
  </details>
</figcaption>
</figure>

Caption with Citation

<figure>
<blockquote>
  <p>Design is not just what it looks like and feels like. Design is how it works.</p>
</blockquote>
<figcaption>
  — <cite>Steve Jobs</cite>, Co-founder of Apple Inc.
</figcaption>
</figure>

Result

Interactive code playground requires JavaScript. Here's the code:

<figure>
<blockquote>
  <p>Design is not just what it looks like and feels like. Design is how it works.</p>
</blockquote>
<figcaption>
  — <cite>Steve Jobs</cite>, Co-founder of Apple Inc.
</figcaption>
</figure>

Browser Support

Browser	Version	Notes
Chrome	8+	Full support
Firefox	4+	Full support
Safari	5.1+	Full support
Edge	12+	Full support
IE	9+	Full support

The <figcaption> element was introduced in HTML5.

Container for self-contained content. Learn more →

Caption for table elements. Learn more →

Embeds images in documents. Learn more →

Citation for creative works. Learn more →

<figcaption> - Figure Caption

The <figcaption> Element

Quick Example

Syntax

Attributes

Common Use Cases

Image Caption

Code Listing

Numbered Figures

Photo Attribution

Chart Caption

Caption Placement

Caption Below Content (Most Common)

Caption Above Content

Styling Figcaptions

Basic Styling

Bordered Caption

Background Caption

Overlay Caption

Numbered Style

Caption Content Patterns

Simple Text

With Emphasis

With Links

Multi-line Caption

Code Example Caption

Accessibility

Descriptive Captions

Caption vs Alt Text

Screen Reader Behavior

Best Practices

One Figcaption Per Figure

Must Be Inside Figure

Optional But Recommended

Advanced Examples

Interactive Caption

Caption with Citation

Browser Support

Related Elements

Specifications

The `<figcaption>` Element