The
<figure>tag in HTML is used to group self-contained media content like images, illustrations, diagrams, code snippets, or videos — usually accompanied by a caption.
It helps semantically associate media with its description, making web content more meaningful and accessible.
Syntax
<figure>
<img src="nature.jpg" alt="A calm forest">
<figcaption>Morning view of a green forest</figcaption>
</figure>Attributes
| Attribute | Description | Example |
|---|---|---|
id | Specifies a unique identifier for the figure element. | id="forest-pic" |
class | Assigns one or more class names for styling. | class="photo-frame" |
style | Adds inline CSS styling. | style="border:2px solid #ccc" |
Example
<h2>Example: Image with Caption</h2>
<figure>
<img src="https://picsum.photos/seed/picsum/400/300" alt="Dense forest with sunlight" width="400">
<figcaption>A random Image</figcaption>
</figure>Output
Browser Output
(Displays the random image with a caption “A random Image” below it.)
Use our TryIt Editor to see the output
Browser Support
 Chrome |  Firefox |  Edge |  Safari |  Opera |  IE9+ |
|---|---|---|---|---|---|
| ✅Yes | ✅Yes | ✅Yes | ✅Yes | ✅Yes | ✅Yes |
The <figure> tag is fully supported across all major browsers.
It is part of HTML5 and works seamlessly in responsive and semantic web layouts.
Notes
- The
<figure>element is independent of the main content flow — it can be moved without affecting meaning. - Usually contains one visual element and one
<figcaption>. - Improves accessibility and SEO by providing descriptive context to media.
Conclusion
The <figure> tag brings semantic structure to visual content by grouping media with captions.
When used correctly, it enhances readability, accessibility, and the overall user experience on modern web pages.
