A technical article often refers to a chart, a screenshot, or a code snippet with a sentence like as the diagram below shows. That content is not really part of the running text: it is a separate piece, one the text simply points to. It could just as well sit further down the page, in a side column, or even in an appendix, without changing the meaning of the paragraph that mentions it.
<figure> exists precisely to mark that kind of self-contained content: an image, an illustration, a code snippet, or a chart, referenced from the main text but able to stand on its own.
Definition
<figure> groups self-contained content referenced from the surrounding text, together with its caption when there is one. The test to remember is simple: if the content could be moved elsewhere in the document, or even into an appendix, without breaking the logic of the paragraph mentioning it, it is a good candidate for <figure>. On the other hand, an image that is truly part of a sentence, like an icon inline with text, has no business inside one.
What it can hold
An image is the most common case, but <figure> accepts any self-contained content: a code snippet shown inside a <pre> block, an SVG chart, a long quote, a data table, or even several images forming a small gallery under a shared caption. Its associated <figcaption>, optional but recommended, can be placed as either the first or last child.
A concrete example
An article documenting a function can illustrate its use with a captioned code snippet, rather than letting it float loosely in the middle of the text:
<p>The function below filters out empty lines before processing.</p>
<figure>
<pre><code>for line in file: if line.strip(): process(line)</code></pre>
<figcaption>Filtering empty lines before processing</figcaption>
</figure>This code block could be moved into a side note or to the end of the article without the introducing sentence losing its meaning: that is exactly the sign it deserves its own <figure>.
Difference from a plain image
An <img> tag sitting alone in the text says nothing about its status: is it decorative, essential content, something that could be referenced elsewhere in the document? Nothing states it. Wrapping it in <figure> and giving it a <figcaption> gives the image its own identity: an identifiable reference point (see figure 2), an automatically associated description, and a structure that some assistive technologies let users browse independently from the rest of the text.
When to skip it
Not every image deserves a <figure>. A logo in the header, a decorative icon next to a button, or a purely illustrative photo with no caption and no explicit reference in the text gains nothing from being wrapped in this container: a plain <img> is enough, and adding <figure> around it only adds an extra tag with no real meaning.
| Situation | Right choice |
|---|---|
| Decorative image, no caption or reference | plain img |
| Icon sitting inline with text | plain img |
| Chart referenced by the text, with a caption | figure and figcaption |
| Documented code snippet cited as an example | figure and figcaption |
<figure>. A purely decorative photo, with no caption and no reference from the text, is simpler as a plain <img>. Reserving <figure> for genuinely self-contained content keeps the page from getting weighed down for nothing.figure tag?No, only the ones that count as self-contained content referenced from the text, or that need a caption. A purely decorative image, or one fully embedded in a sentence, does not need this extra container.
Yes, that is common for a small gallery of related photos, which then share a single caption describing the set rather than one caption per image.
No, it can hold code, a table, a quote, a video, or an audio file: any self-contained content referenced by the text works, the image is just the most common case.