- Home
- /
- Tutorials
- /
- HTML Tutorial
- /
- HTML <figcaption> Tag
HTML Tags
HTML <figcaption> Tag
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
html
<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
html
<!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
html
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 | Edge | Firefox | 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.
