Problem Statement
What is the relationship between <figure> and <figcaption>?
Explanation
The figure element represents self-contained content like images, diagrams, code listings, or videos, while figcaption provides a caption for that content. The figcaption can appear before or after the content inside figure. This combination semantically links content with its description. Figure is useful for content that could be moved to an appendix without affecting the main flow. Examples include illustrations, photos, diagrams, code examples, or charts. Using figure with figcaption improves accessibility by explicitly associating captions with their content. Screen readers announce the relationship between image and caption. It also improves SEO by providing context for images. This is more semantic than using div or p tags for captions.
Code Solution
SolutionRead Only
<!-- Image with caption -->
<figure>
<img src="sunset.jpg" alt="Beautiful sunset">
<figcaption>Sunset over the ocean, January 2024</figcaption>
</figure>
<!-- Code listing with caption -->
<figure>
<figcaption>Example of a JavaScript function</figcaption>
<pre><code>
function greet(name) {
return `Hello, ${name}!`;
}
</code></pre>
</figure>
<!-- Diagram with caption -->
<figure>
<img src="architecture-diagram.png"
alt="System architecture">
<figcaption>
Figure 1: Microservices architecture overview
</figcaption>
</figure>
<!-- Multiple images in one figure -->
<figure>
<img src="photo1.jpg" alt="Photo 1">
<img src="photo2.jpg" alt="Photo 2">
<img src="photo3.jpg" alt="Photo 3">
<figcaption>Photo gallery from our trip</figcaption>
</figure>