Figures & Image Maps
A <figure> groups an image, chart, code sample or quotation with its caption, so they're understood as one unit. Image maps make different areas of a single image clickable. This lesson covers both.
Figure and figcaption
<figure> represents self-contained content that's referred to from the main text but could be moved elsewhere — to a sidebar or an appendix — without breaking the flow. The optional <figcaption> must be the first or last child.
Alt text vs caption
They do different jobs, and you usually need both:
- alt replaces the image for people who can't see it — it describes what the image shows.
- figcaption is visible to everyone and adds context — credit, date, source, explanation.
Avoid repeating the caption word-for-word in the alt text, since screen-reader users would hear it twice.
Figures aren't only for images
Code listings, tables, charts, video clips and quotations all fit. Several images can share one figure, like a before-and-after comparison.
Image maps
An image map defines clickable regions on an image. The <map> contains <area> elements with shapes and coordinates, and the image links to it with usemap:
| shape | coords |
|---|---|
rect | x1,y1,x2,y2 — top-left and bottom-right corners |
circle | x,y,radius |
poly | x1,y1,x2,y2,x3,y3,… — the corners of a polygon |
default | The whole image not covered by other areas |
When areas overlap, the first one listed wins — which is why the centre circle above should really be listed first. Each <area> needs alt text, since it's a link.