Figure & Figcaption — Complete Guide
Figure & Figcaption — Complete Guide: free step-by-step lesson with examples, common mistakes, and interview tips — part of HTML Tutorial on Toolliyo Academy.
On this page
HTML Tutorial · Lesson 18 of 100
Figure & Figcaption
Basics → Forms & semantics → APIs & performance → Projects
Basics · 1 — Structure & media · ~6 min · HTML — Media & Content
What is this?
figure groups media with an optional figcaption — self-contained content units.
Why should you care?
MarkupVerse blog charts and product screenshots use figure for caption association.
See it live — copy this example
Save as demo.html and open in your browser, or use Run Example below.
<figure>
<img src="/charts/savings.png" alt="Bar chart of monthly savings">
<figcaption>Figure 1. Average monthly savings in MarkupVerse accounts.</figcaption>
</figure>Run Example »
Edit the code below and click Run to see the result in Toolliyo’s live editor.
What happened?
- figcaption can be first or last child of figure.
- Keep alt for the image; caption adds context.
Practice next
- Wrap an image in figure.
- Add figcaption.
- Read both alt and caption roles.
- Put a table inside figure.
- Add figure for a code sample.
Remember
figure = unit. figcaption context. alt still needed.
MarkupVerse chart figure
Blog embeds a labeled chart.
Outcome: Caption stays with the image.
Interview prep for this lesson
Practice these questions aloud after reading—each links to a full structured answer.
Sign in to ask a question or upvote helpful answers.
No questions yet — be the first to ask!
