← Back to All Tags

<figcaption>

Defines a caption for a <figure> element

✨ HTML5

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

The <figcaption> tag is supported in all major browsers:

Chrome
Chrome
8.0+
Firefox
Firefox
4.0+
Safari
Safari
5.1+
Edge
Edge
9.0+
Opera
Opera
11.0+

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

<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

<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

<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

<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

<!-- 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
  • Can improve image search rankings when properly used

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

Related Tags