HTML Figure and Figcaption
<figure> groups a piece of content that is related to the main story but can stand as a separate unit. A common example is an image with a caption. <figcaption> provides the caption for the figure. For example, an image of a chart can sit inside <figure>, followed by <figcaption>Sales increased in 2026.</figcaption>. The important idea is the relationship: the image and its caption belong together as one meaningful unit.
Why this matters
- ·Figure connects media with its explanation.
- ·Captions make visual information easier to understand.
- ·The structure gives assistive technology useful context.
Common mistakes
- ·Do not use figure for every random image.
- ·A caption should explain or identify the figure.
- ·Alt text and a figcaption have different jobs and can both be useful.
Your codeHTML
Live preview
Frequently asked questions
A self-contained piece of content such as an image, diagram, chart, or code example.
Practice questions
Question 1
Wrap an image and caption in figure.
Your codeHTML
Live preview
Question 2
Create a figure for a diagram.
Your codeHTML
Live preview
Quick check
Just for this topic answer honestly, then check yourself.
1 / 3