HTML `<figcaption>` Element: Adding Captions to Figures for Enhanced Accessibility

Using the HTML <figcaption> Element for Captions

What is the <figcaption> Element?

The HTML <figcaption> element (figure caption) defines a caption for a <figure> element. A <figure> element typically contains an image, illustration, diagram, code snippet, or other self-contained content. The <figcaption> provides a descriptive caption for that content, improving readability and accessibility. The <figcaption> element can be placed either before or after the content within the <figure> element.

Example:

<figure>
  <img src="image.jpg" alt="Trulli in Italy">
  <figcaption>Fig. 1 - Trulli, Puglia, Italy</figcaption>
</figure>

Browser Support

The <figcaption> element is widely supported by modern browsers. Here's a table showing the first version of each browser to fully support it:

Styling <figure> and <figcaption> with CSS

You can style both the <figure> and <figcaption> elements using CSS to customize their appearance and integration within your page layout.

Example:

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

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