HTML Tags
HTML <figure> Tag
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
html
<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
html
<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>Browser Support
Chrome | Edge | Firefox | 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.