HTML Figure and Figcaption

Understanding HTML Figure and Figcaption

The HTML <figure> element groups self-contained content, while the <figcaption> element provides a caption for that content.

Figures are commonly used with images, diagrams, illustrations, charts, code examples, and other content that benefits from an associated caption.

The <figure> Element

The <figure> element represents self-contained content that is related to the surrounding document but can often be understood or referenced as a separate unit.

<figure>
  <img src="/img/images/image-600x400.jpg"
       alt="HTML image example"
       width="600"
       height="400">
</figure>

Although images are a common use for <figure>, the element is not limited to images and may contain other types of self-contained content.

The <figcaption> Element

The <figcaption> element provides a caption or description associated with the contents of a <figure> element.

<figure>
  <img src="/img/images/image-600x400.jpg"
       alt="HTML image example"
       width="600"
       height="400">
  <figcaption>Example image used in an HTML tutorial.</figcaption>
</figure>

A figure may contain only one <figcaption> element.

Image with a Caption

Using <figure> and <figcaption> together creates a meaningful relationship between an image and its visible caption.

<figure>
  <img src="/img/images/image-600x400.jpg"
       alt="HTML image example"
       width="600"
       height="400">
  <figcaption>A 600 by 400 image used to demonstrate HTML figures.</figcaption>
</figure>

The caption is visible page content and may provide additional context, identification, attribution, or explanation for the figure.

Figcaption Position

The <figcaption> element must be the first or last child of its parent <figure> element.

<figure>
  <figcaption>Caption placed before the image.</figcaption>
  <img src="/img/images/image-600x400.jpg"
       alt="HTML image example"
       width="600"
       height="400">
</figure>

Most examples place the caption after the figure content, but either position is valid when the document structure calls for it.

Multiple Images in a Figure

A single <figure> element can contain more than one image when the images form one related unit and share a common caption.

<figure>
  <img src="/img/images/image-300x200.jpg"
       alt="First HTML image example"
       width="300"
       height="200">

  <img src="/img/images/image-300x200-02.jpg"
       alt="Second HTML image example"
       width="300"
       height="200">

  <figcaption>Two related images presented as one figure.</figcaption>
</figure>

If the images represent separate ideas or require separate captions, individual <figure> elements are usually clearer.

When Figure Is Not Required

Not every image needs to be placed inside a <figure> element. A regular image can remain as a standalone <img> element when it does not need a visible caption or self-contained grouping.

<img src="/img/images/image-600x400.jpg"
     alt="HTML image example"
     width="600"
     height="400">

Use <figure> when the grouping adds meaningful structure rather than simply wrapping every image by default.

Alt Text and Captions

Alt text and a figure caption serve different purposes and should not automatically contain identical text.

The alt attribute provides a text alternative for the image, while <figcaption> provides visible information associated with the entire figure.

<figure>
  <img src="/img/images/image-600x400.jpg"
       alt="HTML image example"
       width="600"
       height="400">
  <figcaption>A neutral 600 by 400 image used throughout the Images tutorials.</figcaption>
</figure>

When the caption already communicates all of the image's meaningful information, the alt text should be written with that surrounding context in mind rather than unnecessarily repeating the caption.

HTML Figure Example

The following example groups an image and its caption inside a <figure> element.

<h1>HTML Figure Example</h1>

<figure>
  <img src="/img/images/image-600x400.jpg"
       alt="HTML image example"
       width="600"
       height="400">
  <figcaption>Example of an image with a visible caption.</figcaption>
</figure>

<p>The figure element groups related content and its caption.</p>

Try changing the caption text in the editor. You can also move the <figcaption> element before the image to see how its position affects the rendered result.

Figure and Figcaption Best Practices

• Use <figure> when content forms a meaningful self-contained unit.
• Use <figcaption> when the figure benefits from a visible caption or explanation.
• Place <figcaption> as the first or last child of <figure>.
• Use only one <figcaption> element within each figure.
• Do not wrap every image in <figure> unless the grouping adds useful meaning.
• Write alt text and captions according to their different purposes rather than automatically duplicating the same text.
• Use separate figures when unrelated images require their own captions.

Summary

The HTML <figure> element groups self-contained content, while <figcaption> provides a visible caption for that content. Together they create a semantic relationship between images or other figure content and the information that describes or identifies the figure.