Figure and Figcaption
Attach a caption to an image or diagram.
Syntax
<figure><img ...><figcaption>Caption</figcaption></figure>The <figure> element groups self-contained media such as an image, diagram, or code snippet. The <figcaption> element gives that media a caption.
This connects the caption to its content in a meaningful, accessible way.
Example
Loading editor…
Press Run to see the result.
When to use it
- A tutorial uses <figure> with <figcaption> to display a code diagram with a numbered caption below it.
- A scientific article wraps each chart in <figure> so referencing "Figure 3" programmatically links to the element.
- A photo gallery uses <figure> around each image so caption text is semantically bound to its specific photo.
More examples
Image with a figure caption
<figure> groups the image and its caption; <figcaption> is semantically associated with the visual content.
<figure>
<img src="html-dom.png"
alt="Diagram of the HTML Document Object Model tree"
width="600" height="400">
<figcaption>Figure 1. The HTML DOM tree structure.</figcaption>
</figure>Code listing inside a figure
Wrapping a code block in <figure>/<figcaption> lets you label and reference code listings in documentation.
<figure>
<pre><code><h1>Hello</h1>
<p>World</p></code></pre>
<figcaption>Listing 1. A minimal HTML document body.</figcaption>
</figure>Video inside a figure element
<figure> can wrap any illustrative content — image, video, or diagram — with a descriptive caption.
<figure>
<video controls width="640">
<source src="demo.mp4" type="video/mp4">
Your browser does not support video.
</video>
<figcaption>Demo: building a navigation menu in HTML.</figcaption>
</figure>
Discussion