Beginner LevelHTML & Semantic Web
How do figure and figcaption semantically associate media content with captions?
❓ Interview Prompt: Explain <figure> and <figcaption> elements, self-contained media units, and accessibility tree benefits.
The '<figure>' element represents self-contained content (images, diagrams, code snippets, charts). The '<figcaption>' element provides a visible legend or caption for its parent '<figure>'.
Accessibility Benefit:
Associates the caption text directly with the image/media object in the accessibility tree, allowing screen readers to announce the caption alongside the graphic.
Code Implementation Example
html
<figure>
<img src="architecture-diagram.png" alt="Microservices service mesh flow diagram">
<figcaption>Figure 1: High-level microservices architecture overview.</figcaption>
</figure>💡Semantically linking images with visible captions using figure and figcaption.
🎯 Interview Key Takeaway
Use <figure> and <figcaption> to associate images, charts, or code snippets with their visible captions.
#figure#figcaption#Media#Semantics#Beginner
Back to all HTML & Semantic Web Questions→