Tag figure

The figure tag is used to group media content (like an image, diagram, illustration, video, or code block) and an optional <figcaption> (caption). It represents independent content that can stand on its own, even if removed from the main text.

✅ Basic Syntax

<figure>
  <img src="cat.jpg" alt="A curious cat looking out the window">
  <figcaption>A curious cat enjoying the view.</figcaption>
</figure>

📍 Result:
An image of a cat with a caption below it.

🔍 Why Use <figure>?

  • Improves semantic HTML (more meaningful for browsers and screen readers).
  • Useful for articles, blogs, documentation, and more.
  • Helps keep related media and descriptions grouped together.

🧩 Common Use Cases

Media TypeExample Content
ImagesProduct photos, illustrations
DiagramsFlowcharts, UI wireframes
Charts/GraphsData visualizations
Code snippetsHighlighted blocks with explanations
VideosWith descriptive text

💡 With Caption (<figcaption>)

<figure>
  <video controls width="300">
    <source src="demo.mp4" type="video/mp4">
    Your browser does not support the video tag.
  </video>
  <figcaption>Product demo video for new app features.</figcaption>
</figure>

🎨 CSS Styling Example

figure {
  border: 1px solid #ddd;
  padding: 10px;
  max-width: 400px;
  margin: 20px auto;
}

figcaption {
  font-size: 0.9em;
  color: #666;
  text-align: center;
  margin-top: 8px;
}

⚠️ Notes

  • <figcaption> must be the first or last child of <figure>.
  • The <figure> element itself does not apply visual styling unless you add CSS.
  • Use it when the media is optional, illustrative, or referenced from nearby text.

✅ Summary

FeatureDetails
Tag<figure>
PurposeWrap self-contained media with caption
Common Pair<figcaption>
Semantic✅ Yes
Accessibility✅ Improves context for assistive tech