HTML figcaption Element

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.

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.

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

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

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

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

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

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

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

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

1. Improves accessibility by providing descriptive context
2. Helps search engines understand content relationships
3. Changes the image source dynamically
4. Groups media and captions semantically

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

1. Text descriptions
2. HTML links
3. Images
4. JavaScript functions

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