Skip to content
Laviyx Learn

Try

HTML course menu

HTML figure and figcaption: Captions for Images, Code and Charts

Learn the HTML figure and figcaption elements: how to caption images, diagrams, code listings and quotations, how a caption differs from alt text, and when to use figure.

Beginner3 min readUpdated
On this page

A figure is self-contained content, such as an image, diagram, chart or code listing, that the main text refers to. In books, figures have captions like "Figure 3: Rainfall by month". HTML has elements for exactly this: <figure> and <figcaption>.

Captioning an image#

HTML
<figure>
  <img src="/lesson-assets/landscape-300.svg" alt="Green hills under a blue sky with a yellow sun" width="300" height="200">
  <figcaption>Figure 1: The view from the hill station at noon.</figcaption>
</figure>
Result
  • <figure> wraps the content and its caption. Browsers indent it by default.
  • <figcaption> is the caption. It must be the first or last child of the <figure>.

The caption is linked to the figure, so assistive technology can announce them together.

Caption versus alt text#

They do different jobs, and a captioned image still needs alt:

Alt textCaption
Who sees itOnly people who cannot see the imageEveryone
PurposeReplaces the imageAdds information about the image
Example"Bar chart of monthly rainfall, highest in July""Figure 2: Rainfall in Mumbai, 2025"

Do not repeat the caption word for word in the alt text, or screen reader users hear it twice.

Figures are not only images#

Anything that can stand on its own and be referred to can be a figure.

A code listing#

HTML
<figure>
  <figcaption>Listing 1: A minimal HTML page.</figcaption>
  <pre><code>&lt;!DOCTYPE html&gt;
&lt;title&gt;Hello&lt;/title&gt;
&lt;p&gt;Hi!&lt;/p&gt;</code></pre>
</figure>
Result

A quotation with its source#

HTML
<figure>
  <blockquote>
    <p>A journey of a thousand miles begins with a single step.</p>
  </blockquote>
  <figcaption>From the <cite>Tao Te Ching</cite></figcaption>
</figure>
Result

When to use figure#

Ask: could this be moved to an appendix or the side of the page without breaking the flow of the text? If yes, it is a figure. A small icon inside a sentence or a decorative background image is not a figure.

Practice#

Practice exercise

Make a figure using /lesson-assets/mango.svg (160 × 160) with the caption "Figure 3: Alphonso mangoes are grown in Maharashtra." and suitable alt text.

Show solution
HTML
<figure>
  <img src="/lesson-assets/mango.svg" alt="Drawing of a ripe yellow mango with a leaf" width="160" height="160">
  <figcaption>Figure 3: Alphonso mangoes are grown in Maharashtra.</figcaption>
</figure>
Result

Key takeaway#

Finished this lesson?

Related lessons

HTMLHTML Images: The img Element, src, alt Text, Width and HeightLearn to add images to web pages with the img element: the src and alt attributes, writing good alt text, empty alt for decorative images, width and height to prevent layout shift, lazy loading, and choosing between JPEG, PNG, WebP, AVIF and SVG.Beginner4 min readHTMLResponsive Images in HTML: srcset, sizes and the picture ElementServe the right image for every screen: srcset with width descriptors and sizes, density descriptors (1x, 2x) for sharp images on high-resolution screens, the picture element for art direction, and modern formats with source type.Beginner5 min readHTMLSemantic HTML: What It Is and Why It MattersLearn what semantic HTML means, why choosing elements by meaning improves accessibility, SEO and maintainability, how to replace div soup with meaningful elements, and a quick guide to picking the right element.Intermediate5 min read