HTML `<figure>` and `<figcaption>` Elements: Structuring Self-Contained Content

Learn how to use the HTML `<figure>` and `<figcaption>` elements to semantically group and caption self-contained content (images, diagrams, code examples, etc.). This tutorial explains their purpose, usage, and how to style them with CSS for improved readability and accessibility.

Using the HTML `<figure>` and `<figcaption>` Elements

Understanding the `<figure>` and `<figcaption>` Elements

The HTML `<figure>` and `<figcaption>` elements are used to specify self-contained content, such as illustrations, diagrams, photos, code listings, etc., that are referenced separately from the main text flow. The `<figure>` element acts as a container for this content, while the `<figcaption>` element provides a caption or description for the content within the figure. This structured approach improves both readability and accessibility for users who might rely on assistive technologies, like screen readers, to interpret your content. The `figure` element should be used for content that is related to the surrounding content but could be moved or removed without impacting the flow of the main content. The caption improves user understanding and adds context.

Using the `<figure>` and `<figcaption>` Elements

The `<figcaption>` element should be placed as a child of the `<figure>` element. It can be either before or after the main content of the figure.

<figure>
  <img src="image.jpg" alt="Image description">
  <figcaption>Fig. 1 - Image caption</figcaption>
</figure>

Browser Support for `<figure>` and `<figcaption>`

The `<figure>` and `<figcaption>` elements are widely supported by modern browsers.

Default Styling and CSS Customization

Most browsers render the `<figure>` element as a block-level element with default margins. You can easily modify this behavior and appearance using CSS. For example:

figure {
  margin: 20px;
  border: 1px solid #ccc;
  padding: 10px;
}

figcaption {
  text-align: center;
  font-style: italic;
}