HTML figure & figcaption Tags Explained: Usage, Examples & Best Practices
Introduction
When building webpages, we often add images, diagrams, charts, or code snippets. But simply placing an image on a page is not enough—we also need to describe and structure it properly.
This is where semantic HTML elements like <figure> and <figcaption> come in.
Learn basics: /html-basics
Instead of using <div> for images and captions, these tags give meaning to your content. They tell browsers and search engines:
“This is media content, and this is its description.”
Think of <figure> like a photo frame, and <figcaption> like the label below it.
What are figure and figcaption Tags?
The <figure> tag is used to group media content like images or diagrams, while <figcaption> provides a caption or description for that content.
These tags are used together:
<figure>→ wraps media content<figcaption>→ describes that content
They improve:
- Accessibility
- SEO
- Content clarity
Learn semantic HTML: /semantic-html-guide
The <figure> tag groups media content, while the <figcaption> tag provides a caption describing that content.
Basic Syntax of figure & figcaption
Here is a simple figure tag example:
<figure>
<img src="image.jpg" alt="Sample Image">
<figcaption>This is a sample image</figcaption>
</figure>Explanation (Line by Line)
<figure>→ Starts the media container<img>→ Displays the image<figcaption>→ Adds description</figure>→ Ends the container
This groups the image and its caption together logically.
Where to Use figure and figcaption
They are used to display media like images, charts, or code snippets along with a caption that explains the content.
These tags are very flexible.
Images with Captions
<figure>
<img src="photo.jpg" alt="Nature">
<figcaption>Beautiful nature view</figcaption>
</figure>Code Snippets
<figure>
<pre>
<code>console.log("Hello World");</code>
</pre>
<figcaption>JavaScript example</figcaption>
</figure>Charts or Diagrams
<figure>
<img src="chart.png" alt="Sales chart">
<figcaption>Monthly sales data</figcaption>
</figure>Videos or Media
<figure>
<video controls>
<source src="video.mp4" type="video/mp4">
</video>
<figcaption>Product demo video</figcaption>
</figure>Real-World Examples
Let’s look at how the HTML figure tag is used in real websites.
Example 1: Blog Image with Caption
<article>
<h2>Travel Blog</h2>
<figure>
<img src="mountains.jpg" alt="Mountains">
<figcaption>Sunset view in the mountains</figcaption>
</figure>
<p>This place is amazing...</p>
</article>Why this works:
- Image and caption are grouped
- Improves readability
- SEO-friendly
Example 2: Multiple Figures
<section>
<figure>
<img src="img1.jpg" alt="">
<figcaption>Image 1</figcaption>
</figure>
<figure>
<img src="img2.jpg" alt="">
<figcaption>Image 2</figcaption>
</figure>
</section>Explanation:
- Each figure is independent
- Clean layout
- Easy to manage
figure vs div
Learn more: /html-tags-guide
| Feature | <figure> | <div> |
|---|---|---|
| Meaning | Semantic | Non-semantic |
| Purpose | Media grouping | Layout only |
| SEO | Better | Poor |
| Accessibility | High | Low |
figcaption Rules
Understanding <figcaption> is important.
Key Rules:
- Must be inside
<figure> - Can be placed at top or bottom
- Only one
<figcaption>per<figure>
Example:
<figure>
<figcaption>Caption on top</figcaption>
<img src="image.jpg" alt="">
</figure>Best Practices
Follow these tips for better usage:
1. Always Use alt Attribute
Important for accessibility and SEO.
2. Write Meaningful Captions
Avoid vague captions like “Image”.
3. Use for Important Media Only
Don’t wrap every image unnecessarily.
4. Keep Caption Short
Make it clear and informative.
5. Combine with Semantic Structure
Use inside:
<article><section>
Common Mistakes
Using <figure> for Layout
It is not a styling tool.
Missing <figcaption>
Captions improve understanding.
Multiple <figcaption>
Only one caption per figure is allowed.
SEO Benefits of figure & figcaption
Using these tags improves SEO.
1. Better Content Understanding
Search engines understand media context.
2. Improved Image SEO
Captions help rank images.
3. Accessibility Enhancement
Screen readers read captions.
4. Rich Snippet Potential
Structured content may appear in rich results.
FAQs Section
1. What is the figure tag in HTML?
The <figure> tag is used to group media content like images or videos.
2. What does <figcaption> do?
It provides a caption describing the content inside <figure>.
3. Is <figcaption> required?
No, but it is recommended for better understanding and SEO.
4. Can I use multiple <figure> tags?
Yes, multiple figures can be used on a page.
5. Where should <figcaption> be placed?
It can be placed at the top or bottom inside <figure>.