<figcaption>

Defines a caption for a <figure> element

✨ HTML5

Quick Answer

What is the HTML <figcaption> tag?

The <figcaption> tag defines a caption for a <figure> element. It can appear as the first or last child within <figure>. This HTML5 semantic element associates descriptive text with images, diagrams, code listings, or other content, improving accessibility and SEO by explicitly linking captions to their content.

Definition and Usage

The <figcaption> element establishes a caption or legend for a <figure> element.

The <figcaption> element can be placed as the first or last child of the <figure> element.

This semantic element is used to provide a descriptive caption for images, illustrations, diagrams, code snippets, tables, or other content grouped within a <figure> element.

Tip: The <figcaption> element must be nested inside a <figure> element and should be placed as either the first or last child.

Note: A <figure> element can contain only one <figcaption> element.

Browser support and standards

Browser rendering and modern HTML conformance are different questions. Check the current element reference for the browsers and features your project needs; the older source version table is not a current compatibility guarantee.

Read the MDN element reference

Attributes

The <figcaption> tag supports the global attributes in HTML.

It also supports the event attributes in HTML.

Note: The <figcaption> element does not have any specific attributes beyond the global HTML attributes.

Examples

Image with Caption

Basic example of an image with a caption:

Example

Unavailable or blocked: image “sunset.jpg”. Provide inline styles and scripts, embedded images or the missing HTML context. External requests and browser dialogs stay blocked.

<figure>
  <img src="sunset.jpg" alt="Beautiful sunset over the ocean" />
  <figcaption>A stunning sunset view from the beach in Malibu, California.</figcaption>
</figure>

Code Snippet with Caption

Using figcaption with a code example:

Example
<figure>
  <figcaption>JavaScript function to calculate sum:</figcaption>
  <pre><code>
function sum(a, b) {
  return a + b;
}
  </code></pre>
</figure>

Table with Caption

Adding a descriptive caption to a table:

Example
<figure>
  <figcaption>Table 1: Monthly Sales Data for Q1 2024</figcaption>
  <table>
    <thead>
      <tr>
        <th>Month</th>
        <th>Sales</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>January</td>
        <td>$45,000</td>
      </tr>
      <tr>
        <td>February</td>
        <td>$52,000</td>
      </tr>
      <tr>
        <td>March</td>
        <td>$61,000</td>
      </tr>
    </tbody>
  </table>
</figure>

Video with Caption

Adding a caption to embedded video:

Example

Unavailable or blocked: media “tutorial.mp4”. Provide inline styles and scripts, embedded images or the missing HTML context. External requests and browser dialogs stay blocked.

<figure>
  <video controls width="600">
    <source src="tutorial.mp4" type="video/mp4" />
  </video>
  <figcaption>Video Tutorial: Introduction to HTML5 Semantic Elements</figcaption>
</figure>

Multiple Images with Single Caption

Group multiple related images under one caption:

Example

Unavailable or blocked: image “photo1.jpg”; image “photo2.jpg”; image “photo3.jpg”. Provide inline styles and scripts, embedded images or the missing HTML context. External requests and browser dialogs stay blocked.

<figure>
  <img src="photo1.jpg" alt="First photo" />
  <img src="photo2.jpg" alt="Second photo" />
  <img src="photo3.jpg" alt="Third photo" />
  <figcaption
    >Gallery: Summer vacation in Italy - Rome, Florence, and Venice</figcaption
  >
</figure>

Styled Caption

Custom styling for figcaption:

Example

Approved-page light CSS-variable defaults are supplied: --border-color. The snippet includes CSS inside its HTML. Unavailable or blocked: image “landscape.jpg”. Provide inline styles and scripts, embedded images or the missing HTML context. External requests and browser dialogs stay blocked.

<style>
  figure {
    margin: 0;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    max-width: 600px;
  }

  figure img {
    width: 100%;
    display: block;
  }

  figcaption {
    background-color: #f8f9fa;
    padding: 15px;
    font-style: italic;
    color: #555;
    text-align: center;
    border-top: 1px solid #ddd;
  }
</style>

<figure>
  <img src="landscape.jpg" alt="Mountain landscape">
  <figcaption>The Swiss Alps at sunset - Photographed by Jane Doe</figcaption>
</figure>

Figure and Figcaption Relationship

Understanding the proper structure and relationship:

Example

Unavailable or blocked: image “image.jpg”; image “image1.jpg”; image “image2.jpg”. Provide inline styles and scripts, embedded images or the missing HTML context. External requests and browser dialogs stay blocked.

<!-- Caption at the bottom (most common) -->
<figure>
  <img src="image.jpg" alt="Description" />
  <figcaption>Caption text here</figcaption>
</figure>

<!-- Caption at the top -->
<figure>
  <figcaption>Caption text here</figcaption>
  <img src="image.jpg" alt="Description" />
</figure>

<!-- Multiple content items with one caption -->
<figure>
  <img src="image1.jpg" alt="First image" />
  <img src="image2.jpg" alt="Second image" />
  <figcaption>Caption for both images</figcaption>
</figure>

Positioning Captions

You can position the caption at the top or bottom of the figure:

Position	HTML Structure	Use Case
Bottom	Place `<figcaption>` as last child	Most common for images and diagrams
Top	Place `<figcaption>` as first child	Common for tables and code listings

CSS Styling for Captions

Common styling techniques for figcaption elements:

Example
/* Basic styling */
figcaption {
  font-style: italic;
  color: #666;
  font-size: 14px;
  padding: 10px;
}

/* Centered caption */
figcaption {
  text-align: center;
  padding: 15px;
  background-color: #f5f5f5;
}

/* Caption with background and border */
figcaption {
  background: linear-gradient(to right, #667eea, #764ba2);
  color: white;
  padding: 12px 20px;
  font-weight: 600;
  border-radius: 0 0 8px 8px;
}

/* Caption overlay on image */
figure {
  position: relative;
}

figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 15px;
}

/* Responsive caption */
@media (max-width: 768px) {
  figcaption {
    font-size: 12px;
    padding: 8px;
  }
}

Accessibility and SEO Benefits

Provides context and description for the associated content
Screen readers announce figcaption, improving accessibility
Helps search engines understand the content and context of images
Creates a semantic relationship between content and its caption
Improves content organization and structure
Better than using plain text or div elements for captions
Enhances user experience by providing additional information
Provides a caption associated with its figure. Descriptive nearby text can help readers and search engines understand an image; rankings are not guaranteed.

Best Practices

Always use <figcaption> inside a <figure> element
Place figcaption as either the first or last child of figure
Keep caption text concise and descriptive
Use figcaption to provide attribution for images or content
Don't repeat information already in the alt attribute
Consider using figcaption for copyright or source information
Only include one figcaption per figure element
Use semantic HTML instead of styling divs to look like captions
Ensure caption text is meaningful and adds value
Style captions consistently across your website

Common Use Cases

Images: Photographs, illustrations, diagrams with descriptive text
Code Examples: Code snippets with explanatory captions
Tables: Data tables with descriptive titles
Videos: Embedded videos with context or attribution
Charts/Graphs: Data visualizations with explanations
Quotes: Blockquotes with source attribution
Audio: Audio players with track information
Diagrams: Technical diagrams with labels or descriptions

Try it Yourself

Interactive Example

Example of figure with figcaption:

[Image Placeholder]

Example caption describing the image above

🚀 Try in Code Playground

Related Tags

<figure>
Defines self-contained content
<img>
Defines an image
<caption>
Defines a table caption
<picture>
Defines a container for images