HTML figure Element

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>.

<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.

<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.

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

<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>

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>

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

• 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

<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.

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

Choose the option that lists all and only the correct statements.

1. Images like photographs or illustrations
2. Audio and video media
3. Code snippets or diagrams
4. Main page navigation links

Choose the option that lists all and only the correct statements.

1. It provides clear structure for assistive devices
2. It improves visual styling automatically
3. It maintains content and caption together during page layout changes
4. It disables right-click on images

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