You might see <figcaption> Element reference while reading someone else’s HTML, or need it while building a page of your own. Instead of memorizing a definition, look at a working example and see when the element makes sense.
The Idea in Plain English
Provides a caption for its containing figure. It describes the image or example without relying only on alt text.
For a reference page, pay attention to where the element is allowed, whether it needs a closing tag, and what other elements it can contain.
A Working Example
Read the sample once before copying it. Notice the element names and attribute values, then compare them with the explanation below.
<figure>
<img src="/images/bridge.jpg" alt="Stone bridge crossing a river" width="600" height="400">
<figcaption>Old bridge in autumn.</figcaption>
</figure>
What Each Part Does
- A figcaption identifies or explains its containing figure.
- A figure keeps an illustration or example together with its caption.
- The img displays an image and uses alt for its text alternative.
- src points to the asset the browser should load.
- alt supplies replacement text for an informative image or empty text for a decorative one.
- width reserves the image or embedded resource’s intended horizontal dimension.
The caption is associated with the image as one figure.
Try It Yourself
Try replacing the example content with your own while keeping the valid HTML structure.
Common Beginner Mistakes
- Copying the exact same words in alt and figcaption without adding value.
- Copying the code without checking whether its linked files or endpoints exist; sample addresses and file paths need real resources.
- Choosing a tag only because its default appearance looks right, without checking whether it describes the content correctly.
Key Takeaways
- Provides a caption for its containing figure. It describes the image or example without relying only on alt text.
- The caption is associated with the image as one figure.
- Test the markup in a browser, and check accessibility and real-world behavior where relevant.