: The Figure Caption element

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 name")}}.

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

html

<figure>
  
  <figcaption>An elephant at sunset</figcaption>
</figure>

css

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

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

figcaption {
  background-color: #222222;
  color: white;
  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

<table class="properties"> <tbody> <tr> <th scope="row"> <a href="/en-US/docs/Web/HTML/Guides/Content_categories" >Content categories</a > </th> <td>None.</td> </tr> <tr> <th scope="row">Permitted content</th> <td> <a href="/en-US/docs/Web/HTML/Guides/Content_categories#flow_content" >Flow content</a >. </td> </tr> <tr> <th scope="row">Tag omission</th> <td>None, both the starting and ending tag are mandatory.</td> </tr> <tr> <th scope="row">Permitted parents</th> <td> A {{HTMLElement("figure")}} element; the <code><figcaption></code> element must be its first or last child. </td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td> <a href="https://w3c.github.io/html-aria/#dfn-no-corresponding-role" >No corresponding role</a > </td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td> <a href="/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/group_role"><code>group</code></a>, <a href="/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/none_role"><code>none</code></a>, <a href="/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/presentation_role"><code>presentation</code></a> </td> </tr> <tr> <th scope="row">DOM interface</th> <td>{{domxref("HTMLElement")}}</td> </tr> </tbody> </table>

Attributes

Examples

Technical summary

Specifications

Browser compatibility

See also