HTML <figure> and <figcaption>
The HTML <figure> element groups self-contained content such as an image, diagram, code example or illustration with an optional <figcaption>. The figure can usually be moved away from the surrounding prose without changing the document's basic meaning.
<figure>
<img src="diagram.png" alt="Flow from input to result">
<figcaption>Processing flow used in the example.</figcaption>
</figure>FIGCAPTION placement Top ↑
A <figcaption> belongs inside its <figure> and captions the figure as a whole. Keep meaningful alternative text on images even when a visible caption is present; the two serve different purposes.
What can a FIGURE contain? Top ↑
Figures are not limited to images. They can group diagrams, code listings, tables or other self-contained material when treating that material as a figure is appropriate.
Not every image needs FIGURE Top ↑
If an image is simply part of the paragraph flow and does not need a caption or self-contained grouping, an ordinary <img> may be sufficient.
Related Tutorials Top ↑
Frequently Asked Questions Top ↑
Is FIGCAPTION required?
No. A figure can exist without a figcaption.
Can FIGCAPTION go outside FIGURE?
No. It captions its containing figure.
Does a caption replace image alt text?
No. Use appropriate alt text for the image and figcaption for the visible figure caption.
Can FIGURE contain code?
Yes, when the code listing is a self-contained figure.
Should every image be wrapped in FIGURE?
No. Use figure when the content is self-contained and the grouping is meaningful.
Subhendu Mohapatra
Author & Instructor at plus2net
I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.
