The
<figcaption>tag defines a caption or description for a<figure>element.
It provides context to the media (such as an image, chart, or video) grouped inside the<figure>.
Usually, it appears either at the top or bottom of the content inside<figure>.
Syntax
<figure>
<img src="sunset.jpg" alt="Sunset over the ocean">
<figcaption>Sunset over the Arabian Sea</figcaption>
</figure>Attributes
| Attribute | Description | Example |
|---|---|---|
id | Specifies a unique identifier for the caption. | id="caption1" |
class | Assigns one or more class names for styling. | class="image-caption" |
style | Adds inline CSS styling. | style="color:gray; font-style:italic;" |
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Figcaption Example</title>
</head>
<body>
<h2>Example: Caption for an Image</h2>
<figure>
<img src="https://picsum.photos/id/29/400/300" alt="Mountain Range" width="400">
<figcaption style="font-weight: bold;">A Random Image Mountain Range</figcaption>
</figure>
</body>
</html>Output
Browser Output
Displays an image of a mountain with a caption “Snow-covered mountains during sunrise” centered below it.
Use our Try It Editor to see the exact output in your browser.
Browser Support
 Chrome |  Firefox |  Edge |  Safari |  Opera |  IE9+ |
|---|---|---|---|---|---|
| ✅Yes | ✅Yes | ✅Yes | ✅Yes | ✅Yes | ✅Yes |
The <figcaption> tag is fully supported by all modern browsers.
It pairs directly with the <figure> tag for semantically meaningful content grouping.
Notes
- You can place
<figcaption>either before or after the main media inside<figure>. - A
<figure>should contain only one<figcaption>element. - Helps screen readers and search engines understand the context of visual content.
Conclusion
The <figcaption> tag provides an accessible and semantic caption for media within a <figure>.
It improves user comprehension, visual structure, and SEO for content that includes images or illustrations.
