HTML Tutorial: Complete HTML Tutorial
About Lesson

HTML <figcaption> Tag


Concept

The <figcaption> tag in HTML is used in conjunction with the <figure> element to provide a caption for an image, diagram, photo, or any other figure. It’s a way to enhance the understanding of the figure by providing additional context or explanation.

Implementation

Example 1: Captioning a Historical Photo

Here’s an example of how you can use the <figcaption> tag to caption a historical photo:

<figure>
  <img src="historical_photo.jpg" alt="Historical Event">
  <figcaption>A historical photo of the signing of the Declaration of Independence.</figcaption>
</figure>

Example 2: Captioning a Graph

You can also use the <figcaption> tag to caption a graph or chart:

<figure>
  <img src="sales_graph.png" alt="Sales Graph">
  <figcaption>Monthly sales data for the year 2022.</figcaption>
</figure>

Attributes


Global Attributes

The <figcaption> tag supports all the global attributes in HTML.

Event Attributes

The <figcaption> tag also supports all the event attributes in HTML.

Browser Support

Browser Support
Chrome 8.0
Firefox 9.0
Safari 4.0
Opera 5.1
IE 11.0

Default CSS Settings

Most browsers will display the <figcaption> element with the following default CSS settings:

figcaption {
  display: block;
}

Conclusion

The <figcaption> tag provides a semantic way to add captions to figures within your content. It helps in enhancing the understanding of the figure and ensures that browsers render it in a way that signifies a caption.


It’s a useful tag for content creators, photographers, and anyone who wants to provide additional context to images or figures.