Definition and Usage

<figcaption> tag represents a caption or legend that references the content of its parent <figure> tag.
It is optional, but when used, it must be placed as either the first or last child of the <figure> tag.

To understand the <figcaption> tag, you should first be familiar with the <figure> tag.

Additional Explanation
The <figure> tag represents self-contained content related to the main flow of the document, such as images, diagrams, or code blocks.
Optionally, you can use the <figcaption> tag to add a caption (or legend) that references this content.

Basic Example

The following example clearly shows how a caption referencing the content of a <figure> tag is represented using the <figcaption> tag.

HTML 
<p>The Earth, home to humanity, is beautiful.</p>
<figure>
    <img src="earth.jpg" alt="Earth glowing blue from space">
    <figcaption>Earth viewed from space</figcaption>
</figure>
Rendered Output

Syntax

  1. The parent element must be a <figure> tag.
  2. It is not mandatory within a <figure> tag; it is optional.
  3. When used inside a <figure> tag, it must appear as either the first or last child element.
  4. The <figure> tag may include additional information about the source.

The parent element must be a <figure> tag.

The following example shows a <figcaption> tag used outside of a <figure> tag.

The <figcaption> tag represents a caption or legend referencing the content of its parent <figure> tag. Therefore, the parent element must be a <figure> tag.

HTML Incorrect usage 
<div>
    <img src="earth.jpg" alt="Earth glowing blue from space">
    <figcaption>Earth viewed from space</figcaption>
</div>

It is optional within a <figure> tag.

The following example shows a <figure> tag without a <figcaption> tag. The <figure> tag is optional and can be used only when needed.

HTML 
<p>The Earth, home to humanity, is beautiful.</p>
<figure>
    <img src="earth.jpg" alt="Earth glowing blue from space">
</figure>

When used inside a <figure> tag, it must appear as either the first or last child element.

When used inside a <figure> tag, it must appear as either the first or last child element. Positioning it this way helps users relying on screen readers or other assistive technologies to understand and interact with the page content effectively.

The following example shows incorrect usage where the <figcaption> tag appears as the second child element.

HTML Incorrect usage 
<figure>
    <img src="earth.jpg" alt="Earth glowing blue from space">
    <figcaption>Earth viewed from space</figcaption>
    <p>The Earth, home to humanity, is beautiful.</p>
</figure>

The <figure> tag may include additional information about the source.

In the following example, the first <figcaption> block provides a description and source information for the duck image. This approach allows you to structure and provide additional information related to media or informational elements on the web page.

HTML 
<figure>
    <img src="duck.jpg" alt="A cute duck by the lakeside">
    <figcaption>
        <p>This photo shows a cute duck.</p>
        <p><small>Photo credit: 🌟 News</small></p>
    </figcaption>
</figure>

Code Explanation
The <small> tag is used to display side comments, legal notices, or notes in smaller text according to typographic conventions or best practices.

Technical Syntax Summary

Technical Syntax Summary of the <figcaption> tag
Permitted parents <figure>
(the <figcaption> must be the first or last child element.)
Permitted content Flow content.
Implicit ARIA role No corresponding role
Permitted ARIA roles group, none, presentation

Browser compatibility

Browser compatibility for the figcaption tag
Tag
Desktop Chrome
Chrome
DesktopDesktop Edge
Edge
Desktop Firefox
Firefox
Safari
Safari
<figcaption> 8 12 4 5.1

Specifications

Specification for the figcaption tag
Specification
<figcaption> HTML Standard
#the-figcaption-element

References

See also