Figure groups self-contained material such as an illustration or code sample, and figcaption explains the figure.
What You Need to Know
The image still needs appropriate alt text. A caption and alt text have different purposes: one describes the figure in context; the other offers an alternative to the image.
A figure can contain media, a quotation, or a code sample. A figcaption should explain what that particular figure shows.
The goal is not to collect as many tags as possible. Pick the element that best describes what the content really is.
Example: See It in Action
Take a look at this small piece of HTML. You can use it in a practice document and change the text to make it your own.
This is a short HTML fragment. To try it as a webpage, put it inside the body element of a complete HTML document.
<figure>
<img src="images/volcano.jpg" alt="A volcano releasing steam">
<figcaption>Steam rising from the crater.</figcaption>
</figure>Let’s Understand the Example
- Figure groups self-contained content, such as a photo or code illustration, with an optional caption.
- Figcaption labels or explains the figure it belongs to.
- Img displays an image. Src chooses the file and alt provides a useful text alternative.
- Src tells the browser where to find an image or other embedded resource.
- Alt supplies a text alternative for an image. Empty alt is appropriate for purely decorative images.
An image appears only if its file path is correct. If it is informative, its alt text should share the same useful meaning; if it is decoration, empty alt text is often right.
What Should You See?
The page should include “Steam rising from the crater.”. If it looks different from what you expected, open developer tools and compare the source with the elements the browser created.
Try removing one piece of markup in a scratch copy, refresh the page, and compare the behavior. This is often the fastest way to understand what that piece contributes.
Try It Yourself
- Write a helpful figure caption and alt text with different jobs.
- Save your changes, open or refresh the page, and compare the result with the original example.
- Tell a friend what your change did. If you are not sure, undo it, refresh the page, and compare.
Common Beginner Mistakes
- Repeating exactly the same sentence in alt and figcaption without adding value.
- Avoid picking tags just for their default bold, italic or spaced appearance. Use CSS for presentation.
Key Takeaways
- Figure groups self-contained material such as an illustration or code sample, and figcaption explains the figure.
- Figure groups self-contained content, such as a photo or code illustration, with an optional caption.
- A figure can contain media, a quotation, or a code sample. A figcaption should explain what that particular figure shows.