figcaptionelement

figcaption is an HTML element used to provide a caption for content contained within a figure element. It is designed to describe the figure as a whole, not only the embedded media, and is commonly paired with images, illustrations, diagrams, or other media inside a figure.

Usage and placement: The figcaption must be a child of the figure element and may appear as the first or the last child. A figure typically contains a single figcaption, though the element may be omitted if no caption is needed. If multiple figures are present, each one should have its own caption if a description is desired.

Content model and semantics: The content inside a figcaption is phrasing content, meaning it supports inline text and inline elements but not block-level elements. The caption is exposed to accessibility tools as the descriptive label for the figure, helping users understand the figure’s purpose or content.

Accessibility considerations: The figcaption enhances accessibility by providing a textual description that can be read in conjunction with the figure. It complements the image’s alt attribute, which describes the image itself. When a figure is decorative or solely presentational, the figcaption can be omitted, and the figure may be conveyed through other accessible means.

Styling and compatibility: Default styling is browser-dependent, with captions typically appearing near the figure. Authors control appearance via CSS. The element is widely supported in modern browsers.

Example:

<figure>

<img src="landscape.jpg" alt="A mountain landscape at sunset">

<figcaption>Sunset over a mountain landscape.</figcaption>

</figure>

Alternative placement:

<figure>

<figcaption>Map of Europe with cities labeled.</figcaption>

<img src="europe-map.jpg" alt="Map of Europe with cities">

</figure>