figure Element in HTML
Image + Caption

HTML <figure> Element: Giving Images a Voice

Images tell stories, but sometimes they need a little help — a caption, a note, or a label. The <figure> element lets you semantically group visual content with its description, using <figcaption>.

What Is the <figure> Element?

<figure> is used to group media or illustrations and their accompanying caption. The content inside should be self-contained and reusable. Common use cases include diagrams, images, code snippets, charts, and even videos.

Basic Syntax

<figure>
  <img src="apple.jpg" alt="A bright red apple">
  <figcaption>A freshly picked red apple.</figcaption>
</figure>

[Apple Image]  
A freshly picked red apple.

This structure ensures the caption is clearly associated with the visual content — semantically and visually.

Common Use Cases

• Photos in a blog post
• Infographics or data visualizations
• Code block examples with explanations
• Embedded videos or audio with context

Example: Gallery of Fruits

<figure>
  <img src="banana.jpg" alt="A ripe banana">
  <figcaption>Bananas are best when the peel has small brown spots.</figcaption>
</figure>

<figure>
  <img src="cherry.jpg" alt="Fresh cherries in a bowl">
  <figcaption>Cherries are rich in antioxidants and taste amazing in pies.</figcaption>
</figure>

Media Isn’t Just Images

The <figure> element can also wrap videos, audio, code samples, or any kind of illustration.

<figure>
  <pre><code>console.log('Hello, World!');</code></pre>
  <figcaption>Output of a basic JavaScript hello world script.</figcaption>
</figure>

Placement of <figcaption>

The <figcaption> can go before or after the visual content inside the <figure> — both are valid. Just keep it inside the <figure> block.

Accessibility & Best Practices

• Always include alt text for images inside <figure>
• Use <figcaption> to provide extra context — especially useful for screen readers
• Keep each figure’s content logically isolated so it could stand on its own

Example: Audio Captioning

<figure>
  <audio controls src="apple-facts.mp3"></audio>
  <figcaption>Listen to 5 fun facts about apples.</figcaption>
</figure>

[Audio Player]  
Listen to 5 fun facts about apples.

Summary

The <figure> element gives structure and voice to your media. You’ve now learned to:

• Group images, code, or audio with <figcaption>
• Use visual content semantically for both humans and machines
• Enhance accessibility and context across platforms

What’s Next?

Up next: the <time> element — where we give dates and times both meaning and machine readability.