Live Preview
An image figure with a visible caption below the media:
HTML <figcaption> Tag
Overview
What You’ll Learn
By the end of this tutorial, you’ll add accessible, visible captions to images and media with semantic HTML.
In HTML, the <figcaption> tag associates a caption with content inside a <figure> element. This guide covers syntax, attributes, accessibility, and best practices for beginners and web developers alike.
Core Syntax
Place <figcaption> inside <figure>.
Image Captions
Label photos, charts, and diagrams for every visitor.
Video Context
Describe embedded videos and other media blocks.
Global Attributes
Style captions with class, id, and more.
CSS Styling
Center, italicize, or brand your caption text.
Accessibility
Pair figcaption with proper alt text on images.
Fundamentals
What Is the <figcaption> Tag?
The figcaption element (<figcaption>) defines a caption or legend for the content encapsulated within a <figure> element. It enhances accessibility and context for images, diagrams, videos, code listings, and other self-contained media.
Must live inside figure
figcaption is only valid as a direct child of figure. Never place it outside a figure or nested inside unrelated elements.
Unlike the table caption element, figcaption is part of the HTML5 figure model. Browsers render it as normal text below (or above) the figure content, and you can style it freely with CSS.
Foundation
📝 Syntax
Place <figcaption> as a direct child of <figure>, either before or after the media:
syntax.html
<figure>
<!-- Your content goes here -->
<figcaption>Your Caption Here</figcaption>
</figure>Syntax Rules
figcaptionmust be a direct child offigure.- A
figuremay contain onefigcaptionelement. - Caption placement can be first or last inside the figure.
- Keep captions concise but descriptive—they appear for all users, not just screen readers.
Cheat Sheet
⚡ Quick Reference
| Pattern | Code Snippet | Notes |
|---|---|---|
| Image caption | <figure><img><figcaption> | Most common pattern |
| Video caption | <figure><video><figcaption> | Describes media context |
| Caption first | <figcaption> before content | Valid HTML5 order |
| Styled caption | class="image-caption" | CSS hook on figcaption |
| Parent element | <figure> | Required wrapper |
| Default style | Plain text | No browser default italics |
Comparison
⚖️ <figcaption> vs alt
Both relate to images, but they serve different purposes:
| Feature | <figcaption> | alt attribute |
|---|---|---|
| Visibility | Visible caption on the page | Hidden text for assistive tech |
| Element type | HTML element inside figure | Attribute on img |
| Length | Can be a full sentence or paragraph | Keep short and functional |
| Accessibility | Announced with figure content | Replaces image when not displayed |
Comparison
⚖️ <figcaption> and <figure>
These elements work together as a labeled media unit:
| Element | Role | When to use |
|---|---|---|
<figure> | Self-contained content block | Wrap images, videos, diagrams, code snippets |
<figcaption> | Caption or legend | Describe what the figure shows |
| Together | Labeled figure | Articles, tutorials, galleries, documentation |
| Without figure | Invalid pattern | figcaption requires a figure parent |
Reference
🧰 Attributes
The <figcaption> tag has no tag-specific attributes. Use global attributes to style and identify captions:
class GlobalCSS hook for caption typography, alignment, and color.
class="image-caption"id GlobalUnique identifier for linking or scripting the caption.
id="figure-1-caption"lang GlobalLanguage of the caption when it differs from the page.
lang="es"title GlobalAdvisory tooltip on hover for extra context.
title="Photo credit" attributes.html
<figure class="image-container">
<img src="your-image.jpg" alt="Description of the image">
<figcaption class="image-caption">A beautiful sunset</figcaption>
</figure>Global attributes apply to figcaption itself—they are not inherited from the parent figure.
Hands-On
Examples Gallery
Image captions, video descriptions, and styled figcaption patterns with copy-ready code and live previews.
Image Captions
One of the primary use cases for <figcaption> is providing captions for images inside figure.
image-captions.html
<figure>
<img src="your-image.jpg" alt="Description of the image">
<figcaption>A stunning landscape captured at dawn</figcaption>
</figure>📚 Common Use Cases
Use <figcaption> for photo credits in articles, chart labels in reports, video titles in tutorials, diagram explanations in documentation, and gallery thumbnails where the caption adds context beyond a short alt text.
Video Descriptions
When embedding videos inside figure, <figcaption> provides additional context for all visitors:
video-descriptions.html
<figure>
<video controls>
<source src="tutorial.mp4" type="video/mp4">
</video>
<figcaption>An informative tutorial on HTML5 features</figcaption>
</figure>Styled Caption with CSS
Apply a class to figcaption for italic captions, custom colors, or alignment that matches your design system.
styled-figcaption.html
<figure class="image-container">
<img src="your-image.jpg" alt="Description of the image">
<figcaption class="image-caption">A beautiful sunset</figcaption>
</figure>Design
Styling <figcaption> with CSS
Captions have no strong browser defaults. Style them to match your layout:
font-size Smaller caption texttext-align Center under imagesfont-style Italic photo creditscolor Muted secondary tone figcaption-styles.css
/* Figure caption styling */
figure figcaption {
margin-top: 0.5rem;
font-size: 0.875rem;
color: #64748b;
text-align: center;
}
figcaption.image-caption {
font-style: italic;
font-weight: 500;
}Live styled figcaption
A11y
♿ Accessibility
Captions improve clarity for everyone when used correctly:
- Always use figure — wrap media in
figurebefore addingfigcaption. - Keep alt on images —
figcaptiondoes not replace thealtattribute onimg. - Write descriptive captions — explain what the figure shows, not just repeat the filename.
- Avoid empty figcaption — if there is no caption, omit the element entirely.
🧠 How <figcaption> Works
1
Author wraps media in figure
Place an image, video, or diagram inside figure.
Markup
2
Caption is added
Insert figcaption as a direct child with descriptive text.
Semantics
3
Browser renders the unit
Media and caption display as one self-contained figure block.
Rendering
=
Clear, labeled media
Readers understand images and videos in context without guessing.
Compatibility
Universal Browser Support
The <figcaption> element is fully supported in all modern browsers and Internet Explorer 9+.
Baseline · HTML5 Semantic
Figure captions that work everywhere
From legacy Internet Explorer to the latest mobile browsers — figcaption is a safe HTML5 building block for labeled media.
100% Core tag support
Google Chrome All versions · Desktop & Mobile
Full supportMozilla Firefox All versions · Desktop & Mobile
Full supportApple Safari All versions · macOS & iOS
Full supportMicrosoft Edge All versions · Chromium & Legacy
Full supportInternet Explorer IE 9+ · Legacy environments
Full supportOpera All modern versions
Full support<figcaption> tag 100% supported
Bottom line: Ship semantic figure captions with confidence. The <figcaption> element is safe to use in every production environment today.
Wrap Up
Conclusion
Mastering the <figcaption> tag empowers web developers to provide meaningful context and improve the accessibility of multimedia content. Whether you are captioning images, videos, or diagrams, integrating figcaption inside figure enhances the overall user experience.
Always pair figcaption with a proper figure wrapper, keep image alt text in place, and use CSS classes for consistent caption styling across your site.
Pro Tips
💡 Best Practices
✅ Do
- Place
figcaptionas a direct child offigure - Write concise, descriptive captions
- Keep
alton images alongside figcaption - Use CSS classes to style captions consistently
❌ Don’t
- Use figcaption outside of
figure - Replace
altwith a caption alone - Duplicate the same text in alt and figcaption verbatim
- Leave figcaption empty or use it purely for SEO keyword stuffing
Summary
Key Takeaways
Knowledge Unlocked
Six truths every developer should know about <figcaption>
Bookmark these before you ship — they’ll keep your media captions semantic and accessible.
6
Core concepts 01
Figure Caption
<figcaption> labels content inside figure.
02
figure Required
Caption must be a direct child of figure.
Structure 03
Not alt
Visible caption complements, not replaces, alt text.
Accessibility 04
Media Context
Works with images, videos, and diagrams.
Use Case 05
CSS Friendly
Style size, color, and alignment freely.
Styling 06
Universal Support
HTML5 semantic element with full browser support.
Compatibility❓ Frequently Asked Questions
It defines a caption or legend for content inside a
figure element, such as an image, diagram, or video.No.
alt describes the image for assistive technology. figcaption is a visible caption that adds context for all users.It must be a direct child of
figure, either before or after the media content.No tag-specific attributes exist. Use global attributes like
class, id, lang, and title.Yes. figcaption is fully supported in all modern browsers and Internet Explorer 9 and later.
Caption Your Media
Add figcaption inside figure for images and videos in the interactive HTML editor.
About the author
6 people found this page helpful