<figure> - Figure with Optional Caption

The `<figure>` Element

Block-level HTML5

The <figure> element represents self-contained content, typically with an optional caption specified using <figcaption>. It’s commonly used for images, diagrams, code snippets, and other content referenced from the main text.

Quick Example

<figure>
<img src="https://via.placeholder.com/400x200" alt="Placeholder image">
<figcaption>Figure 1: An example image with caption</figcaption>
</figure>

Result

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

<figure>
<img src="https://via.placeholder.com/400x200" alt="Placeholder image">
<figcaption>Figure 1: An example image with caption</figcaption>
</figure>

Syntax

<figure>
  <!-- Content (image, code, diagram, etc.) -->
  <figcaption>Caption text</figcaption>
</figure>

The <figcaption> element is optional and can appear before or after the content.

Attributes

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

<figure id="diagram-1" class="centered-figure">
  <!-- Content -->
</figure>

Common Use Cases

Image with Caption

<figure>
<img src="https://via.placeholder.com/400x300" alt="Mountain landscape">
<figcaption>The Rocky Mountains at sunset, photographed in 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 at sunset, photographed in Colorado.</figcaption>
</figure>

Multiple Images

<figure>
<img src="https://via.placeholder.com/150x150" alt="Photo 1" style="margin: 0.5rem;">
<img src="https://via.placeholder.com/150x150" alt="Photo 2" style="margin: 0.5rem;">
<img src="https://via.placeholder.com/150x150" alt="Photo 3" style="margin: 0.5rem;">
<figcaption>Figure 2: Gallery of product images</figcaption>
</figure>

Result

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

<figure>
<img src="https://via.placeholder.com/150x150" alt="Photo 1" style="margin: 0.5rem;">
<img src="https://via.placeholder.com/150x150" alt="Photo 2" style="margin: 0.5rem;">
<img src="https://via.placeholder.com/150x150" alt="Photo 3" style="margin: 0.5rem;">
<figcaption>Figure 2: Gallery of product images</figcaption>
</figure>

Code Snippet

<figure>
<pre><code>function greet(name) {
return "Hello, " + name + "!";
}

console.log(greet("World"));</code></pre>
<figcaption>Example 1: A simple JavaScript greeting function</figcaption>
</figure>

Result

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

<figure>
<pre><code>function greet(name) {
return "Hello, " + name + "!";
}

console.log(greet("World"));</code></pre>
<figcaption>Example 1: A simple JavaScript greeting function</figcaption>
</figure>

Blockquote

<figure>
<blockquote>
  <p>The best way to predict the future is to invent it.</p>
</blockquote>
<figcaption>— Alan Kay, computer scientist</figcaption>
</figure>

Result

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

<figure>
<blockquote>
  <p>The best way to predict the future is to invent it.</p>
</blockquote>
<figcaption>— Alan Kay, computer scientist</figcaption>
</figure>

Video Content

<figure>
<video width="400" height="225" controls style="max-width: 100%;">
  <source src="video.mp4" type="video/mp4">
  Your browser doesn't support video.
</video>
<figcaption>Video 1: Product demonstration tutorial</figcaption>
</figure>

Result

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

<figure>
<video width="400" height="225" controls style="max-width: 100%;">
  <source src="video.mp4" type="video/mp4">
  Your browser doesn't support video.
</video>
<figcaption>Video 1: Product demonstration tutorial</figcaption>
</figure>

Diagram or Illustration

<figure>
<svg width="200" height="100" style="border: 1px solid #ddd;">
  <rect x="10" y="10" width="80" height="80" fill="#3b82f6"/>
  <circle cx="150" cy="50" r="40" fill="#10b981"/>
</svg>
<figcaption>Diagram 1: Basic geometric shapes</figcaption>
</figure>

Result

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

<figure>
<svg width="200" height="100" style="border: 1px solid #ddd;">
  <rect x="10" y="10" width="80" height="80" fill="#3b82f6"/>
  <circle cx="150" cy="50" r="40" fill="#10b981"/>
</svg>
<figcaption>Diagram 1: Basic geometric shapes</figcaption>
</figure>

Table

<figure>
<table style="width: 100%; border-collapse: collapse;">
  <tr>
    <th style="border: 1px solid #ddd; padding: 8px;">Product</th>
    <th style="border: 1px solid #ddd; padding: 8px;">Price</th>
  </tr>
  <tr>
    <td style="border: 1px solid #ddd; padding: 8px;">Widget A</td>
    <td style="border: 1px solid #ddd; padding: 8px;">$19.99</td>
  </tr>
  <tr>
    <td style="border: 1px solid #ddd; padding: 8px;">Widget B</td>
    <td style="border: 1px solid #ddd; padding: 8px;">$29.99</td>
  </tr>
</table>
<figcaption>Table 1: Product pricing comparison</figcaption>
</figure>

Result

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

<figure>
<table style="width: 100%; border-collapse: collapse;">
  <tr>
    <th style="border: 1px solid #ddd; padding: 8px;">Product</th>
    <th style="border: 1px solid #ddd; padding: 8px;">Price</th>
  </tr>
  <tr>
    <td style="border: 1px solid #ddd; padding: 8px;">Widget A</td>
    <td style="border: 1px solid #ddd; padding: 8px;">$19.99</td>
  </tr>
  <tr>
    <td style="border: 1px solid #ddd; padding: 8px;">Widget B</td>
    <td style="border: 1px solid #ddd; padding: 8px;">$29.99</td>
  </tr>
</table>
<figcaption>Table 1: Product pricing comparison</figcaption>
</figure>

Figcaption Placement

Caption Below (Most Common)

<figure>
<img src="https://via.placeholder.com/300x200" alt="Sunset">
<figcaption>A beautiful sunset over the ocean.</figcaption>
</figure>

Result

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

<figure>
<img src="https://via.placeholder.com/300x200" alt="Sunset">
<figcaption>A beautiful sunset over the ocean.</figcaption>
</figure>

Caption Above

<figure>
<figcaption>Figure 1: Website traffic over time</figcaption>
<img src="https://via.placeholder.com/400x200" alt="Traffic chart">
</figure>

Result

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

<figure>
<figcaption>Figure 1: Website traffic over time</figcaption>
<img src="https://via.placeholder.com/400x200" alt="Traffic chart">
</figure>

Styling Figures

Basic Figure Styling

<style>
.styled-figure {
  margin: 2rem 0;
  padding: 1rem;
  background: #f9fafb;
  border-radius: 8px;
  text-align: center;
}
.styled-figure img {
  max-width: 100%;
  border-radius: 4px;
}
.styled-figure figcaption {
  margin-top: 0.75rem;
  font-style: italic;
  color: #6b7280;
}
</style>

<figure class="styled-figure">
<img src="https://via.placeholder.com/350x200" alt="Sample">
<figcaption>A stylish figure with background and rounded corners</figcaption>
</figure>

Result

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

<style>
.styled-figure {
  margin: 2rem 0;
  padding: 1rem;
  background: #f9fafb;
  border-radius: 8px;
  text-align: center;
}
.styled-figure img {
  max-width: 100%;
  border-radius: 4px;
}
.styled-figure figcaption {
  margin-top: 0.75rem;
  font-style: italic;
  color: #6b7280;
}
</style>

<figure class="styled-figure">
<img src="https://via.placeholder.com/350x200" alt="Sample">
<figcaption>A stylish figure with background and rounded corners</figcaption>
</figure>

Bordered Figure

<style>
.bordered-figure {
  border: 2px solid #e5e7eb;
  padding: 1rem;
  margin: 1.5rem 0;
}
.bordered-figure img {
  width: 100%;
  display: block;
}
.bordered-figure figcaption {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid #e5e7eb;
  font-size: 0.9rem;
}
</style>

<figure class="bordered-figure">
<img src="https://via.placeholder.com/400x250" alt="Example">
<figcaption>Figure with border and divider</figcaption>
</figure>

Result

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

<style>
.bordered-figure {
  border: 2px solid #e5e7eb;
  padding: 1rem;
  margin: 1.5rem 0;
}
.bordered-figure img {
  width: 100%;
  display: block;
}
.bordered-figure figcaption {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid #e5e7eb;
  font-size: 0.9rem;
}
</style>

<figure class="bordered-figure">
<img src="https://via.placeholder.com/400x250" alt="Example">
<figcaption>Figure with border and divider</figcaption>
</figure>

Floating Figure

<style>
.float-figure {
  float: right;
  margin: 0 0 1rem 1rem;
  max-width: 250px;
}
.float-figure img {
  width: 100%;
  border-radius: 4px;
}
.float-figure figcaption {
  font-size: 0.85rem;
  color: #4b5563;
  margin-top: 0.5rem;
}
</style>

<figure class="float-figure">
<img src="https://via.placeholder.com/250x150" alt="Chart">
<figcaption>Sales chart Q4 2025</figcaption>
</figure>

<p>This paragraph wraps around the floated figure. The figure appears to the right of the text content, creating a magazine-style layout.</p>

<p>More text continues to flow around the figure naturally.</p>

Result

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

<style>
.float-figure {
  float: right;
  margin: 0 0 1rem 1rem;
  max-width: 250px;
}
.float-figure img {
  width: 100%;
  border-radius: 4px;
}
.float-figure figcaption {
  font-size: 0.85rem;
  color: #4b5563;
  margin-top: 0.5rem;
}
</style>

<figure class="float-figure">
<img src="https://via.placeholder.com/250x150" alt="Chart">
<figcaption>Sales chart Q4 2025</figcaption>
</figure>

<p>This paragraph wraps around the floated figure. The figure appears to the right of the text content, creating a magazine-style layout.</p>

<p>More text continues to flow around the figure naturally.</p>

Card-Style Figure

<style>
.card-figure {
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  max-width: 400px;
  margin: 1.5rem auto;
}
.card-figure img {
  width: 100%;
  display: block;
}
.card-figure figcaption {
  padding: 1rem;
  background: #f9fafb;
}
</style>

<figure class="card-figure">
<img src="https://via.placeholder.com/400x250" alt="Product">
<figcaption><strong>Product Name:</strong> Premium widget with advanced features</figcaption>
</figure>

Result

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

<style>
.card-figure {
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  max-width: 400px;
  margin: 1.5rem auto;
}
.card-figure img {
  width: 100%;
  display: block;
}
.card-figure figcaption {
  padding: 1rem;
  background: #f9fafb;
}
</style>

<figure class="card-figure">
<img src="https://via.placeholder.com/400x250" alt="Product">
<figcaption><strong>Product Name:</strong> Premium widget with advanced features</figcaption>
</figure>

Accessibility

<figure>
  <img src="chart.png" alt="Bar chart showing 50% increase in sales">
  <figcaption>Q4 Sales Performance</figcaption>
</figure>

<figure>
  <img src="chart.png"> <!-- Missing alt text -->
  <figcaption>Q4 Sales Performance</figcaption>
</figure>

Descriptive Captions

Good
Less Helpful

<figure>
  <img src="process.png" alt="Flowchart">
  <figcaption>
    Figure 3: User authentication process showing login,
    verification, and session creation steps
  </figcaption>
</figure>

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

Screen readers announce figures with their captions:

<!-- Screen reader: "Figure. [Image description]. Caption: Product photo" -->
<figure>
  <img src="product.jpg" alt="Blue widget with chrome finish">
  <figcaption>Product photo</figcaption>
</figure>

Semantic Usage

When to Use Figure

Use <figure> when content:

Is self-contained
Could be moved to an appendix
Is referenced from the main text
Benefits from a caption

<article>
<h1>Understanding HTML Figures</h1>

<p>Figures are useful for supplementary content. As shown in Figure 1 below, proper HTML structure improves accessibility.</p>

<figure id="fig-1">
  <img src="https://via.placeholder.com/400x200" alt="HTML structure diagram">
  <figcaption>Figure 1: Semantic HTML document structure</figcaption>
</figure>

<p>Referring back to Figure 1, notice how elements are properly nested...</p>
</article>

Result

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

<article>
<h1>Understanding HTML Figures</h1>

<p>Figures are useful for supplementary content. As shown in Figure 1 below, proper HTML structure improves accessibility.</p>

<figure id="fig-1">
  <img src="https://via.placeholder.com/400x200" alt="HTML structure diagram">
  <figcaption>Figure 1: Semantic HTML document structure</figcaption>
</figure>

<p>Referring back to Figure 1, notice how elements are properly nested...</p>
</article>

When NOT to Use Figure

Don't Need Figure
Use Figure

<!-- Image is purely decorative -->
<div class="hero">
  <img src="banner.jpg" alt="">
</div>

<!-- Image is part of content flow, not supplementary -->
<p>
  Our logo: <img src="logo.png" alt="Company logo">
</p>

<!-- Image illustrates content and has caption -->
<figure>
  <img src="architecture.png" alt="System architecture">
  <figcaption>Our microservices architecture</figcaption>
</figure>

Advanced Examples

Multiple Captions

<figure>
<img src="https://via.placeholder.com/400x250" alt="Comparison diagram">
<figcaption>
  <strong>Figure 2:</strong> Performance comparison
</figcaption>
<figcaption>
  <small>Source: Annual Performance Report 2025</small>
</figcaption>
</figure>

Result

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

<figure>
<img src="https://via.placeholder.com/400x250" alt="Comparison diagram">
<figcaption>
  <strong>Figure 2:</strong> Performance comparison
</figcaption>
<figcaption>
  <small>Source: Annual Performance Report 2025</small>
</figcaption>
</figure>

Code Example with Highlighting

<figure style="background: #1e293b; padding: 1rem; border-radius: 8px;">
<pre style="color: #e2e8f0; margin: 0;"><code>const fetchData = async () => {
const response = await fetch('/api/data');
return response.json();
};</code></pre>
<figcaption style="color: #94a3b8; margin-top: 0.75rem; font-size: 0.9rem;">
  Listing 1: Async data fetching function
</figcaption>
</figure>

Result

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

<figure style="background: #1e293b; padding: 1rem; border-radius: 8px;">
<pre style="color: #e2e8f0; margin: 0;"><code>const fetchData = async () => {
const response = await fetch('/api/data');
return response.json();
};</code></pre>
<figcaption style="color: #94a3b8; margin-top: 0.75rem; font-size: 0.9rem;">
  Listing 1: Async data fetching function
</figcaption>
</figure>

Image Gallery

<style>
.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}
.gallery img {
  width: 100%;
  height: 100px;
  object-fit: cover;
  border-radius: 4px;
}
</style>

<figure>
<div class="gallery">
  <img src="https://via.placeholder.com/150" alt="Photo 1">
  <img src="https://via.placeholder.com/150" alt="Photo 2">
  <img src="https://via.placeholder.com/150" alt="Photo 3">
</div>
<figcaption>Gallery: Product photos from multiple angles</figcaption>
</figure>

Result

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

<style>
.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}
.gallery img {
  width: 100%;
  height: 100px;
  object-fit: cover;
  border-radius: 4px;
}
</style>

<figure>
<div class="gallery">
  <img src="https://via.placeholder.com/150" alt="Photo 1">
  <img src="https://via.placeholder.com/150" alt="Photo 2">
  <img src="https://via.placeholder.com/150" alt="Photo 3">
</div>
<figcaption>Gallery: Product photos from multiple angles</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 <figure> element was introduced in HTML5.

Caption or legend for a figure element. Learn more →

Embeds images in documents. Learn more →

Responsive image container. Learn more →

Extended quotations, can be used in figures. Learn more →

<figure> - Figure with Optional Caption

The <figure> Element

Quick Example

Syntax

Attributes

Common Use Cases

Image with Caption

Multiple Images

Code Snippet

Blockquote

Video Content

Diagram or Illustration

Table

Figcaption Placement

Caption Below (Most Common)

Caption Above

Styling Figures

Basic Figure Styling

Bordered Figure

Floating Figure

Card-Style Figure

Accessibility

Always Include alt Text on Images

Descriptive Captions

Screen Reader Behavior

Semantic Usage

When to Use Figure

When NOT to Use Figure

Advanced Examples

Multiple Captions

Code Example with Highlighting

Image Gallery

Browser Support

Related Elements

Specifications

The `<figure>` Element