The <figcaption> tag is used to provide a caption (description or label) for the content inside a figure element, such as an image, diagram, illustration, or chart.
It helps improve semantic meaning and accessibility, giving context to the media for all users, including screen readers.
✅ Basic Syntax
<figure>
<img src="sunset.jpg" alt="A sunset over the mountains">
<figcaption>A beautiful sunset over the Rocky Mountains.</figcaption>
</figure>
📍 Result:
Displays an image with a descriptive caption underneath.
🧩 How It Works
<figure>groups the media and the caption together.<figcaption>gives the media a clear, accessible label.- You can place
<figcaption>before or after the media element inside<figure>.
<figure>
<figcaption>Logo of the website</figcaption>
<img src="logo.png" alt="Website logo">
</figure>
🎨 Styling Example
figure {
border: 1px solid #ddd;
padding: 10px;
width: fit-content;
margin: 20px 0;
}
figcaption {
font-size: 0.9em;
color: #555;
text-align: center;
margin-top: 5px;
}
✅ Use Cases
- Images with explanatory text
- Charts or graphs with titles
- Videos with context
- Code snippets or illustrations that need a caption
📌 Accessibility Tip
Always pair your <figure> with <figcaption> if the visual content needs explanation. This helps both search enginesand assistive technologies better understand the content.
✅ Summary
| Tag | <figcaption> |
|---|---|
| Purpose | Provides a caption for a media figure |
| Parent tag | Must be used inside <figure> |
| Placement | Before or after media content |
| Semantic | ✅ Yes |
| Styling | Can be styled like any other text |