: The Figure Caption element

{{HTMLSidebar}}

The <figcaption> HTML element represents a caption or legend describing the rest of the contents of its parent {{HTMLElement("figure")}} element, providing the <figure> an {{glossary("accessible description")}} .

{{InteractiveExample("HTML Demo: <figcaption>", "tabbed-shorter")}}

<figure>
  <img
    src="/shared-assets/images/examples/elephant.jpg"
    alt="Elephant at sunset" />
  <figcaption>An elephant at sunset</figcaption>
</figure>

figure {
  border: thin #c0c0c0 solid;
  display: flex;
  flex-flow: column;
  padding: 5px;
  max-width: 220px;
  margin: auto;
}

img {
  max-width: 220px;
  max-height: 150px;
}

figcaption {
  background-color: #222;
  color: #fff;
  font: italic smaller sans-serif;
  padding: 3px;
  text-align: center;
}

Attributes

This element only includes the global attributes.

Examples

Please see the {{HTMLElement("figure")}} page for examples on <figcaption>.

Technical summary

Content categories	None.
Permitted content	Flow content.
Tag omission	None, both the starting and ending tag are mandatory.
Permitted parents	A `{{HTMLElement("figure")}}` element; the `<figcaption>` element must be its first or last child.
Implicit ARIA role	No corresponding role
Permitted ARIA roles	`group`, `none`, `presentation`
DOM interface	`{{domxref("HTMLElement")}}`

Specifications

{{Specifications}}

Browser compatibility

{{Compat}}

docs.rodeo

MDN Web Docs mirror