Add media with context
Use figure and figcaption to pair media with useful context.
- Use figure and figcaption together
- Write media context people can understand without visuals
- Keep media content meaningful
A <figure> groups media and related context. Add <figcaption> to describe what the media represents in this page. This helps everyone understand why the image, video or diagram is present.
1<figure>
2 <img src="robot.jpg" alt="Small exploration robot on a workbench">
3 <figcaption>Prototype robot for the school demo.</figcaption>
4</figure>Small exploration robot on a workbench Prototype robot for the school demo.
Use concise alt text for the image itself and use figcaption for page-specific context. If a media item is decorative, keep it out of the main reading flow or use empty alt text.
Key takeaways
Use figure to group media and related context.
Use figcaption for visible context and alt text for image alternatives.
Keep captions concise and meaningful.
Lesson quiz
5 questions · pass with 4 correct · up to 50 XP
Passing this quiz completes the lesson and keeps your streak going. Questions you miss come back in review sessions later.
Practice: write HTML
Write the markup, preview it in a sandboxed browser frame, and check the visible text against the requirements.
Show a project image with context
Create a figure with an image whose alt text is Student-built weather station prototype and a figcaption that says Prototype weather station presented at the community fair.
- Figure text
Your markup is previewed in a sandboxed frame. Run tests to check the visible page text.
Questions about this lesson
Stuck? Ask. Figured something out? Share it. Explaining is one of the best ways to learn.
Loading posts…