The HTML <figure> tag
The HTML <figure> element groups self-contained content — an image, diagram, chart, code listing or quotation — that is referenced from the main text, optionally with a <figcaption> caption.
Overview
The <figure> element wraps self-contained content that the surrounding text refers to as a single unit — most often an illustrative <img>, but equally a diagram, a <pre> code listing, a chart, or a quotation. The defining trait is that it could be moved elsewhere — to a sidebar, the top of the page, an appendix — without breaking the flow of the prose that mentions it.
Add a <figcaption> as the figure's first or last child to caption it — a figure number, a credit line, or an explanation. When a caption is present, it supplies the figure's accessible name, tying caption and content together for assistive technology.
Reach for <figure> when the relationship between content and caption matters semantically. If you only need a styled box around an image, a plain <img> (or a <div>) is enough.
Syntax
<figure>
<img src="chart.png" alt="Q4 revenue chart">
<figcaption>Q4 revenue grew 18%.</figcaption>
</figure>Example
<figure style="margin:0;">
<img src="https://codeshack.io/web/img/icon.png" alt="CodeShack logo" width="64" height="64">
<figcaption style="color:#64748b;font-size:.9rem;">Figure 1: the logo.</figcaption>
</figure>Best practices
- Use it for content referenced as a unit — images, diagrams, code listings or quotations.
- Caption it with a <figcaption> as the first or last child.
- Reserve it for content that could be relocated without breaking the surrounding text.
- Keep the alt text on the image even when a caption is present — they serve different purposes.