HTML <figcaption> Tag

The <figcaption> element in HTML is used to provide a caption or descriptive text for a <figure> element. The <figure> element is typically used to group self-contained content such as images, illustrations, diagrams, code snippets, or other media, and <figcaption> gives this content context by offering a textual explanation or description.

A key aspect of <figcaption> is that it is semantically tied to its parent <figure> element. This means that the caption is considered part of the figure, and assistive technologies, like screen readers, will associate the caption with the figure content, improving accessibility.

The <figcaption> element can be placed as the first or last child of the <figure> element, depending on whether you want the caption to appear above or below the figure. Its content can include text, inline HTML elements, and even links or small formatting, though it generally avoids large blocks of unrelated content to maintain semantic clarity.

Using <figcaption> is preferable to manually placing a caption with a <p> or <div> because it clearly communicates the relationship between the media content and its description, enhancing both semantic structure and accessibility of your HTML documents.

Example usage:

<figure>
  <img src="sunset.jpg" alt="Sunset over the mountains">
  <figcaption>A breathtaking sunset over the Rocky Mountains, captured in the evening.</figcaption>
</figure>

In this example, the <figcaption> provides a clear, descriptive context for the image, making it meaningful both visually and semantically.