HtmlHow-ToBeginner · 3 min read

How to Use Figure and Figcaption in HTML: Simple Guide

Use the <figure> element to group media like images, and add a <figcaption> inside it to provide a caption. This helps browsers and screen readers understand the image and its description as one unit.

📐

Syntax

The <figure> element wraps the media content, such as an image or illustration. Inside it, the <figcaption> element provides a caption or description for that media. This pairing groups the image and its caption semantically.

<figure>: Container for media and caption.
<img>: The image or media inside the figure.
<figcaption>: Caption describing the media.

html

<figure>
  <img src="image.jpg" alt="Description of image">
  <figcaption>This is the caption for the image.</figcaption>
</figure>

💻

Example

This example shows a photo with a caption below it using <figure> and <figcaption>. The caption explains what the image is about, improving clarity and accessibility.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Figure and Figcaption Example</title>
  <style>
    figure {
      max-width: 300px;
      margin: 20px;
      font-family: Arial, sans-serif;
      text-align: center;
    }
    figcaption {
      font-size: 1rem;
      color: #555;
      margin-top: 0.5rem;
    }
    img {
      width: 100%;
      height: auto;
      border-radius: 8px;
    }
  </style>
</head>
<body>
  <figure>
    <img src="https://via.placeholder.com/300x200.png?text=Sample+Image" alt="Sample placeholder image">
    <figcaption>A sample placeholder image with a descriptive caption.</figcaption>
  </figure>
</body>
</html>

Output

A centered image with a caption below it reading: 'A sample placeholder image with a descriptive caption.'

⚠️

Common Pitfalls

Common mistakes include placing <figcaption> outside the <figure> element or forgetting to add an alt attribute to the image. Also, using <figure> without a caption can reduce semantic clarity.

Correct usage groups the image and caption inside <figure> and always includes descriptive alt text for accessibility.

html

<!-- Wrong: figcaption outside figure -->
<figure>
  <img src="image.jpg" alt="Description">
</figure>
<figcaption>This caption is outside the figure and will not be associated properly.</figcaption>

<!-- Right: figcaption inside figure -->
<figure>
  <img src="image.jpg" alt="Description">
  <figcaption>This caption is correctly inside the figure.</figcaption>
</figure>

📊

Quick Reference

<figure>: Wraps media and caption as one unit.
<figcaption>: Provides a caption inside <figure>.
Always include alt text on images for accessibility.
Use <figure> to improve semantic meaning and screen reader support.

✅

Key Takeaways

Use

to group images and their captions together semantically.

Place

inside

to describe the media clearly.

Always add descriptive alt text to images for accessibility.

Proper use improves page structure and helps screen readers.

Avoid placing figcaption outside the figure element.