The <figcaption> element provides a caption for its parent <figure> — and only makes sense nested inside one.
Syntax
<figure>
<img src="..." alt="...">
<figcaption>Caption text goes here.</figcaption>
</figure>Basic Example
<figure>
<img src="/assets/images/team-photo.jpg" alt="The CodingNow mentor team at the Noida campus">
<figcaption>Our mentor team, pictured at the CodingNow Noida campus, 2026.</figcaption>
</figure>Browser output: the caption text renders directly below the image, typically in a slightly smaller or muted style depending on the page's CSS.
How It Works
<figcaption> can be placed as either the first or last child inside <figure> — the spec allows both positions, though placing it after the content it describes (typically after the image) is the more common, more intuitive reading order.
Important Attributes
| Attribute | Purpose |
|---|---|
| — none special — | Only universal global attributes apply |
Real-World Example
<figure>
<img src="/assets/images/enrollment-chart.png" alt="Bar chart showing enrollment growth from 2023 to 2026">
<figcaption>Figure 2: Course enrollment has grown by 40% year-over-year since 2023.</figcaption>
</figure>A chart caption that adds real, specific context (the "40% year-over-year" figure) beyond what the image's alt text alone conveys — this is the real value of a proper caption.
Common Mistakes
- Using
<figcaption>outside of a<figure>— it has no meaning on its own - Writing a caption that just repeats the
alttext word-for-word instead of adding genuinely new context
Best Practices
- Write captions that add information the alt text doesn't already cover — source, date, extra explanation
- Keep
<figcaption>only inside a<figure>, as its first or last child
Accessibility Considerations
Screen readers associate the caption with its figure, announcing them as a connected unit — a real, structural benefit over a plain styled paragraph placed near an image with no explicit association.
SEO Considerations
Caption text is genuine, crawlable page content that gives search engines additional context about an image and the surrounding topic.
Browser & Modern HTML Notes
Introduced alongside <figure> in HTML5, and always used together in practice.
Mini Practice
- Write a caption for a chart image that adds a specific data point not mentioned in the alt text.
- Identify why a caption that just repeats "A photo of the team" adds no real value.
