Codectionary / Developer documentation / HTML

<figure>, <figcaption>

The <figure> element wraps self-contained content — typically an image, illustration, diagram, code snippet, or chart — along with an optional caption provided by <figcaption>. Content in a figure is meant to be referenceable independently of the main flow; a reader should be able to move it elsewhere on the page (or even to an appendix) without breaking the document's meaning.

Syntax

<figure>
  <img src="chart.png" alt="Sales chart">
  <figcaption>Figure 1: Quarterly sales</figcaption>
</figure>

Examples

Image with Caption

The most common use of figure: an image with a descriptive caption.

<figure>
  <img src="https://via.placeholder.com/500x300" alt="Mountain landscape at sunset">
  <figcaption>A sunset over the mountains, taken in 2025.</figcaption>
</figure>

Code Snippet as a Figure

Using figure to present a labeled code example.

<figure>
  <pre><code>const sum = (a, b) => a + b;</code></pre>
  <figcaption>Example: an arrow function that adds two numbers</figcaption>
</figure>

Multiple Images in One Figure

Grouping several related images under a single caption.

<figure>
  <img src="before.png" alt="Before redesign">
  <img src="after.png" alt="After redesign">
  <figcaption>Before and after the homepage redesign</figcaption>
</figure>

Best practices

  • Use figure when content (and its caption) should make sense even if moved elsewhere on the page
  • figcaption can appear as either the first or last child of figure — both are valid
  • Not every image needs a figure — use it when a caption or independent referencing genuinely adds value
  • The alt attribute on img still matters even inside a figure; figcaption is a caption, not alt text

At a glance

Purpose
Structure and meaning for web content
File extension
.html · .htm
Runs in
Web browsers
Usually used with
CSS and JavaScript

Specifications & further reading

Related HTML documentation

<img>
The <img> element embeds images into web pages. Images enhance visual communication and user engagement. The src attribute specifies the image source, while alt provides alternative text for accessibility and SEO. Images are inline-replaced elements, meaning they display in the flow of text but are replaced with the actual image content.<video>
The <video> element embeds video content directly in a web page without needing a third-party plugin. It supports built-in playback controls, multiple source formats via nested <source> elements for browser compatibility, and various attributes for controlling autoplay, looping, and muting.<audio>
The <audio> element embeds sound content — music, podcasts, or sound effects — directly in a page. Like <video>, it supports multiple <source> elements for format fallback and built-in playback controls, without needing Flash or other plugins.<iframe>
The <iframe> element embeds another HTML document within the current page, creating a nested browsing context. It is commonly used for embedding maps, videos from external platforms, payment widgets, or ads. Because it loads content from potentially untrusted sources, the sandbox attribute is important for restricting what an embedded page is allowed to do.