Figure and Figcaption

The <figure> element is a self-contained piece of content that is referenced from the main flow — typically an image, diagram, code listing, or chart. It can be moved to an appendix without affecting the flow of the document.

Figcaption

The optional <figcaption> element provides a caption for the <figure>. It must be the first or last child of the <figure> element. Using <figure>/<figcaption> instead of an <img> with a nearby <p> programmatically associates the caption with the image — a significant accessibility improvement. This pairing is also used for code blocks with explanatory captions.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Figure and Figcaption</title>
  <style>
    figure {
      margin: 0;
      display: inline-block;
      text-align: center;
      border: 1px solid #ddd;
      padding: 8px;
      border-radius: 4px;
    }
    figcaption {
      margin-top: 6px;
      font-size: 0.875rem;
      color: #555;
      font-style: italic;
    }
  </style>
</head>
<body>
  <figure>
    <img src="grand-canyon.jpg"
         alt="Aerial view of the Grand Canyon at sunset"
         width="600" height="400">
    <figcaption>
      Fig. 1 — The Grand Canyon, Arizona, USA.
      Photographed at sunset from the South Rim.
    </figcaption>
  </figure>

  <figure>
    <pre><code>const sum = (a, b) => a + b;</code></pre>
    <figcaption>Listing 1 — Arrow function for addition.</figcaption>
  </figure>
</body>
</html>

HTML

Full Editor

Pro Tip

The alt attribute on an image and the <figcaption> serve different purposes — alt text is a fallback replacement for the image, while figcaption supplements it with context for all users. Write them independently.

Related Resources

HTML Reference

Complete tag & property list

HTML How-To Guides

Step-by-step practical guides

HTML Exercises

Practice what you've learned