Path // www.yourhtmlsource.com → Reference → <figcaption>

<figcaption>

The <figcaption> element represents a caption or legend describing the contents of its parent <figure> element. It provides context for images, diagrams, code listings, or other self-contained content. The figcaption can appear either before or after the content within the figure, but must be a direct child of the figure element.

Page Navigation:
Syntax | Attributes | Examples | When to Use | Related Elements

This page was last updated on 2025-11-17

Syntax

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

The element requires both opening and closing tags. It must be the first or last child of a <figure> element and there can only be one figcaption per figure. The caption content can include any flow content such as text, headings, links, or other HTML elements.

Attributes

Global attributes - The <figcaption> element supports all global attributes such as id, class, style, lang, and dir.

The <figcaption> element has no element-specific attributes. Its semantic meaning comes from its position within the <figure> element.

Examples

Image with Caption

<figure>
<img src="sunset.jpg" alt="Orange and purple sunset over the ocean">
<figcaption>A beautiful sunset captured at Malibu Beach, California.</figcaption>
</figure>

Code Listing with Caption

<figure>
  <figcaption>Example: Hello World in JavaScript</figcaption>
  <pre><code>
  function sayHello() {
    console.log("Hello, World!");
  }
  </code></pre>
</figure>

Chart with Detailed Caption

<figure>
  <img src="sales-chart.png" alt="Bar chart showing quarterly sales">
  <figcaption>
    <strong>Figure 1:</strong> Quarterly sales data for 2024.
    Q4 shows a 25% increase over Q3.
  </figcaption>
</figure>

When to Use

Use the <figcaption> element when:

Providing a caption for images, illustrations, or photographs
Adding descriptions to diagrams or charts
Labeling code examples or listings
Crediting sources for quoted content within a figure
Adding context that helps explain the figure's content

Important notes:

Must be inside a <figure> element
Only one figcaption per figure
Can be placed at the start or end of the figure content
Does NOT replace the alt attribute on images - both serve different purposes
The figcaption is visible to all users, while alt text is primarily for screen readers