The figure and figcaption elements provide semantic meaning to images and their captions. They help search engines, screen readers, and developers understand the relationship between an image and its descriptive text.
The Figure Element
The <figure> element represents self-contained content, typically an image, illustration, diagram, code snippet, or chart that is referenced in the main content but could be moved to another location without affecting the document's flow.
basic-figure.html
<figure>
<img src="sunset.jpg" alt="Orange sunset over the ocean" width="800" height="600">
</figure>The Figcaption Element
The <figcaption> element provides a caption or legend for the content in a <figure>. It's optional but highly recommended when you want to add descriptive text.
figure-with-caption.html
<figure>
<img src="sunset.jpg" alt="Orange sunset over the ocean" width="800" height="600">
<figcaption>A beautiful sunset at Malibu Beach, California</figcaption>
</figure>Why Use Figure and Figcaption?
✨ Benefits:
- Semantic meaning: Explicitly connects images with their captions
- Accessibility: Screen readers understand the relationship between image and caption
- SEO: Search engines better understand your content structure
- Styling: Easier to style images and captions as a unit
- Maintainability: Clear structure for developers
Figcaption Position
The figcaption can be placed either before or after the image within the figure:
Caption Below Image (Most Common)
caption-below.html
<figure>
<img src="diagram.png" alt="Website architecture diagram" width="800" height="600">
<figcaption>Figure 1: Basic website architecture</figcaption>
</figure>Caption Above Image
caption-above.html
<figure>
<figcaption>Photo taken at Grand Canyon National Park</figcaption>
<img src="canyon.jpg" alt="Grand Canyon landscape" width="1200" height="800">
</figure>Practical Examples
Photo Gallery
photo-gallery.html
<section class="gallery">
<h2>Travel Photos</h2>
<figure>
<img src="paris.jpg" alt="Eiffel Tower at night" width="800" height="600">
<figcaption>Eiffel Tower illuminated at night, Paris, France</figcaption>
</figure>
<figure>
<img src="tokyo.jpg" alt="Tokyo cityscape" width="800" height="600">
<figcaption>Shibuya Crossing in Tokyo, Japan</figcaption>
</figure>
<figure>
<img src="nyc.jpg" alt="New York skyline" width="800" height="600">
<figcaption>Manhattan skyline from Brooklyn Bridge</figcaption>
</figure>
</section>Product Showcase
product-showcase.html
<article class="product">
<h1>Ceramic Coffee Mug</h1>
<figure>
<img src="mug-blue.jpg" alt="Blue ceramic coffee mug" width="600" height="600">
<figcaption>Available in Ocean Blue - $24.99</figcaption>
</figure>
<p>Handcrafted ceramic mug perfect for your morning coffee...</p>
</article>Article with Illustrations
article-illustration.html
<article>
<h1>Understanding Climate Change</h1>
<p>Climate change is affecting our planet in numerous ways...</p>
<figure>
<img src="temperature-chart.png"
alt="Graph showing global temperature rise from 1880 to 2024"
width="1000"
height="600">
<figcaption>
Figure 1: Global temperature anomalies from 1880-2024.
Data source: NASA GISS
</figcaption>
</figure>
<p>As the data shows, temperatures have risen significantly...</p>
</article>Image with Credit Attribution
image-credit.html
<figure>
<img src="wildlife.jpg"
alt="Lion resting in savanna grassland"
width="1200"
height="800">
<figcaption>
Lion in Serengeti National Park.
Photo by <a href="https://photographer.com">Jane Smith</a>
</figcaption>
</figure>Multiple Images in One Figure
A figure can contain multiple images that share a single caption:
multiple-images.html
<figure>
<img src="before.jpg" alt="Garden before renovation" width="400" height="300">
<img src="after.jpg" alt="Garden after renovation" width="400" height="300">
<figcaption>Before and after garden renovation project</figcaption>
</figure>Figure for Other Content Types
While commonly used for images, figure can also contain other types of content:
Code Snippets
code-figure.html
<figure>
<pre><code>function greet(name) {
return "Hello, " + name;
}</code></pre>
<figcaption>Listing 1: Simple greeting function in JavaScript</figcaption>
</figure>Blockquotes
quote-figure.html
<figure>
<blockquote>
<p>The only way to do great work is to love what you do.</p>
</blockquote>
<figcaption>— Steve Jobs</figcaption>
</figure>Videos
video-figure.html
<figure>
<video src="tutorial.mp4" controls width="800" height="450"></video>
<figcaption>Tutorial: Getting Started with HTML</figcaption>
</figure>Tables
table-figure.html
<figure>
<table>
<tr>
<th>Year</th>
<th>Revenue</th>
</tr>
<tr>
<td>2023</td>
<td>$1.2M</td>
</tr>
<tr>
<td>2024</td>
<td>$1.8M</td>
</tr>
</table>
<figcaption>Table 1: Annual revenue growth 2023-2024</figcaption>
</figure>Styling Figures
Figures are easy to style as a unit with CSS:
figure-styles.css
figure {
margin: 2rem 0;
padding: 1rem;
border: 1px solid #ddd;
border-radius: 8px;
background: #f9f9f9;
}
figcaption {
margin-top: 0.5rem;
text-align: center;
font-style: italic;
color: #666;
}
figure img {
width: 100%;
height: auto;
display: block;
}Best Practices
✅ Do:
- Use figure for self-contained content with optional captions
- Include figcaption when the image needs explanation or context
- Keep captions concise and informative
- Use figure for images, diagrams, charts, code, or quotes
- Ensure the alt text and caption complement each other (don't duplicate)
- Use figure to group related images with a shared caption
❌ Don't:
- Use figure just for styling purposes (use CSS classes)
- Use figure for every image (only when it makes semantic sense)
- Put figcaption outside the figure element
- Use multiple figcaptions in one figure
- Duplicate the exact same text in alt and figcaption
Alt Text vs Figcaption
It's important to understand the difference between alt text and figcaption:
| Aspect | Alt Text | Figcaption |
|---|---|---|
| Purpose | Describes image content | Provides context or explanation |
| Visibility | Only visible when image fails to load | Always visible to all users |
| Required | Yes | Optional |
| Audience | Screen reader users, crawlers | All users |
Example of Good Alt + Figcaption Combination
alt-figcaption-combo.html
<!-- ✅ Good: Alt describes, caption provides context -->
<figure>
<img src="graph.png"
alt="Bar chart showing 40% increase in sales from Q1 to Q4"
width="800"
height="600">
<figcaption>
Figure 3: Our sales growth exceeded expectations this year,
driven primarily by new product launches in Q3.
</figcaption>
</figure>
<!-- ❌ Bad: Alt and caption say the same thing -->
<figure>
<img src="graph.png"
alt="Sales chart"
width="800"
height="600">
<figcaption>Sales chart</figcaption>
</figure>Accessibility Considerations
- Screen readers announce figure elements and their captions appropriately
- Figcaptions are visible to all users, not just those using assistive technology
- The combination of alt text and figcaption provides comprehensive information
- Always include alt text even when using figcaption
- Keep figcaptions concise and relevant
Key Takeaways
<figure>represents self-contained content<figcaption>provides a caption for the figure- Figcaption is optional but recommended for context
- Figcaption can appear before or after the content
- Use figure for images, diagrams, code, quotes, videos, or tables
- Alt text describes the image; figcaption provides context
- Figure makes content more semantic and accessible
- A figure can contain multiple images with one caption
What's Next?
Now that you understand how to use figure and figcaption for semantic image markup, you're ready to learn about responsive images. In the next lesson, we'll explore how to serve different image sizes for different devices using srcset and the picture element.