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

AttributeDescriptionExample
idSpecifies a unique identifier for the caption.id="caption1"
classAssigns one or more class names for styling.class="image-caption"
styleAdds 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+
YesYesYesYesYesYes

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.