figcaption Element in HTML
Captions for Images and Media

HTML <figcaption> Element: Give Media a Meaningful Caption

Visuals speak volumes, but captions give them clarity. The <figcaption> element lets you attach a caption to an image, illustration, chart, code block, or any media within a <figure> element — creating a rich, accessible context.

What Is the <figcaption> Element?

The <figcaption> element defines a caption or description for the content inside a <figure>. It's especially useful for explaining visual elements, making your page more informative and accessible to all users, including those using screen readers.

Basic Syntax

<figure>
  <img src="apple.jpg" alt="Red apple">
  <figcaption>A freshly picked red apple on a wooden table.</figcaption>
</figure>

[ Apple Image ]  
A freshly picked red apple on a wooden table.

Placement of <figcaption>

<figcaption> must be placed inside the <figure> element. It can appear before or after the media content — both placements are valid and semantic.

Example: Caption First

<figure>
  <figcaption>An image showing three types of bananas.</figcaption>
  <img src="banana.jpg" alt="Three bananas: green, yellow, and spotted">
</figure>

Why Use <figcaption>?

• Improves accessibility: Screen readers announce the caption along with the media.
• Provides clarity: Especially for complex visuals like graphs or data charts.
• Helps with SEO: Search engines can index descriptive context.

Example: Code Sample with Caption

<figure>
  <pre><code>console.log('Hello, World!');</code></pre>
  <figcaption>A basic JavaScript statement to print a message.</figcaption>
</figure>

Example: Multimedia Captioning

<figure>
  <audio controls src="cherry-facts.mp3"></audio>
  <figcaption>Listen to 3 quick facts about cherries.</figcaption>
</figure>

Best Practices

• Keep captions concise but meaningful.
• Always use <figcaption> inside <figure> — not outside.
• Pair captions with descriptive alt attributes for full accessibility.

Summary

The <figcaption> element gives your visual and media content a voice — the text that tells the story. You now know how to:

• Use <figcaption> to describe images, videos, code, or audio
• Place it correctly within a <figure> block
• Enhance both SEO and accessibility

What’s Next?

Coming up next: the <time> element — where we give dates and durations semantic value and machine readability.