HTML <figure> Tag

What You’ll Learn

By the end of this tutorial, you’ll group images, videos, and diagrams in semantic, accessible figure elements.

The HTML <figure> tag encapsulates self-contained media content, such as images and videos, optionally with a <figcaption> caption. This guide covers syntax, attributes, accessibility, and best practices for beginners and web developers alike.

What Is the <figure> Tag?

The figure element (<figure>) is a semantic HTML5 container for self-contained content—typically an image, illustration, diagram, video, or code snippet—that is referenced from the main document flow. It can include an optional <figcaption> element for a visible caption or legend.

Figures are ideal for content that could be moved to an appendix without breaking the narrative. They improve structure, accessibility, and how search engines interpret your page.

📝 Syntax

Wrap your media inside opening and closing <figure> tags. Add <figcaption> when you need a caption:

<figure>
  <img src="your-image.jpg" alt="Description of the image">
  <figcaption>Your Caption Here</figcaption>
</figure>

Syntax Rules

• Place one primary piece of content (image, video, diagram, code) inside figure.
• figcaption is optional but should be used when a caption adds value.
• figcaption must be a direct child of figure.
• Always include meaningful alt text on images inside a figure.

⚖️ <figure> vs <div>

Both can wrap media visually, but only figure carries semantic meaning:

⚖️ <figure> and <figcaption>

These elements work together as a labeled media unit:

Examples Gallery

Styled figures, image captions, and embedded video patterns with copy-ready code and live previews.

<figure>
  <img src="example.jpg" alt="An example image">
  <figcaption>This is an example image</figcaption>
</figure>

<figure>
  <video controls>
    <source src="your-video.mp4" type="video/mp4">
  </video>
  <figcaption>Your Video Caption</figcaption>
</figure>

<figure class="media-figure">
  <img src="your-image.jpg" alt="Description of the image" class="custom-image">
  <figcaption class="custom-caption">Your Caption Here</figcaption>
</figure>

♿ Accessibility

Semantic figures help all users understand media in context:

• Always use alt on images — figcaption does not replace the alt attribute.
• Add figcaption when helpful — visible captions benefit sighted users and add context.
• Keep figures self-contained — the content should make sense on its own.
• Avoid nesting figures — one figure per media unit keeps structure clear.

💡 Best Practices