figure and figcaption Revisited
Apply figure beyond images to code, charts, and quotes.
figure Beyond Images
The <figure> element is not just for images — it marks any self-contained content that is referenced from the main text:
- Code examples
- Mathematical equations
- Charts and diagrams
- Quotations
- Audio and video with captions
Code Listing in figure
Label code examples as figures:
<figure id="code-1">
<figcaption>Listing 1: A simple JavaScript greeting function.</figcaption>
<pre><code>function greet(name) {
return `Hello, ${name}!`;
}
console.log(greet('World'));</code></pre>
</figure>
<p>As shown in <a href="#code-1">Listing 1</a>, the function...</p>All lessons in this course
- aside Complementary Content
- figure and figcaption Revisited
- details and summary Disclosure Widget
- The progress and meter Elements