4 min read
ā¢Question 23 of 49easyWhat is figure and figcaption?
Semantic image captions.
What You'll Learn
- What figure and figcaption do
- When to use them
- Examples beyond images
Understanding Figure
The <figure> element represents self-contained content. <figcaption> provides a caption for it.
Image with Caption
index.htmlHTML
<figure>
<img src="chart.png" alt="Sales growth chart">
<figcaption>Figure 1: Quarterly sales growth 2024</figcaption>
</figure>Multiple Images
index.htmlHTML
<figure>
<img src="before.jpg" alt="Before renovation">
<img src="after.jpg" alt="After renovation">
<figcaption>Home renovation: before and after</figcaption>
</figure>Code Listing
index.htmlHTML
<figure>
<pre><code>function hello() {
console.log('Hello!');
}</code></pre>
<figcaption>A simple greeting function</figcaption>
</figure>Quote
index.htmlHTML
<figure>
<blockquote>
The only way to do great work is to love what you do.
</blockquote>
<figcaption>ā Steve Jobs</figcaption>
</figure>