`<figure>` groups self-contained illustrative content with its caption. Use it for images, code blocks, charts, diagrams — anything that's referenced from the surrounding text but stands on its own.
HTML
<figure>
<img src="/charts/page-load.svg"
alt="Line chart: P50 page load time dropped from 4.2s in Jan to 2.1s in Mar.">
<figcaption>
<strong>Fig 1.</strong> P50 page load time, January–March 2025.
Source: our RUM beacon.
</figcaption>
</figure>
<!-- Code listing -->
<figure>
<pre><code class="language-js">
const sum = nums.reduce((a, b) => a + b, 0);
</code></pre>
<figcaption>Reduce-based sum of a number array.</figcaption>
</figure>
<!-- Quote -->
<figure>
<blockquote>
<p>Premature optimization is the root of all evil.</p>
</blockquote>
<figcaption>— <cite>Donald Knuth</cite>, <cite>Structured Programming with go to Statements</cite>, 1974</figcaption>
</figure>Save your own code snippets
Create a free account and build your private vault. Share publicly whenever you want.