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>

Output

Browser Output

html

(Displays the random image with a caption “A random Image” below it.)
Use our TryIt Editor to see the output

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.

PreviousHTML <img> Tag NextHTML <figcaption> Tag