Figures & Figcaptions
Figures & Captions
Think of a textbook. It has a diagram drawing, and directly underneath it, there is a small italic text description starting with "Figure 4.1: Flow chart of system database". The diagram and the text are treated as one single grouped unit.In HTML, we group images, charts, code listings, or illustrations with a description using:
<figure>: The semantic wrapper container.<figcaption>: The caption text label nested inside the figure.Why does it matter?
Before HTML5, developers grouped images and caption texts using generic divs. Using<figure> and <figcaption> tells search engines and screen readers that the caption is directly connected to the image or media above it, improving site semantics.
How to write it
Wrap the image and caption inside the figure block:<figure>
<img src="graph.png" alt="Analytics Chart">
<figcaption>Graph A: Monthly Active Users</figcaption>
</figure>
Fig 1: Description
Common Mistakes
<figcaption> outside the figure: The <figcaption> must always be a child of the <figure> tag.<figure> should contain at most one <figcaption>.Quick Reference
<figure> — Semantic wrapper for graphics and caption groups.<figcaption> — The description label.Your Task
Create a `<figure>`. Inside it, place an `<img>` tag with `src="graph.png"` and a `<figcaption>` containing 'Graph A'.
index.html
Type code above to start the lesson.
Live Preview