Open navigation menu

Figure and Figcaption for Media

Uses figure and figcaption elements to associate media content with captions, supporting images, code blocks, and quoted content.

HtmlData Fetching

Code

snippet
<figure>
  <img src="chart.png"
       alt="Bar chart showing sales growth from 2020 to 2024"
       width="600" height="400">
  <figcaption>
    Figure 1: Annual sales growth from 2020 to 2024,
    showing a 250% increase over four years.
  </figcaption>
</figure>

<figure>
  <pre><code>const result = await fetch('/api/data')
  .then(res => res.json())
  .then(data => data.filter(x => x.active));</code></pre>
  <figcaption>Listing 1: Fetching and filtering active records</figcaption>
</figure>

<figure>
  <blockquote>
    <p>The best way to predict the future is to invent it.</p>
  </blockquote>
  <figcaption>
    Alan Kay, in <cite>Smalltalk</cite>
  </figcaption>
</figure>

<figure>
  <video controls width="400">
    <source src="tutorial.mp4" type="video/mp4">
    <track kind="captions" src="captions.vtt" srclang="en">
    Your browser does not support video.
  </video>
  <figcaption>Video 1: Tutorial walkthrough</figcaption>
</figure>

<figure>
  <audio controls>
    <source src="podcast.mp3" type="audio/mpeg">
    Your browser does not support audio.
  </audio>
  <figcaption>Episode 42: Web Standards</figcaption>
</figure>

Related Examples