HTML Syntax

<figure>
   ...
   <figcaption> ... </figcaption>
</figure>

NOTE: Both start and end tags are required.

The <figure> element represents self-contained content, optionally with a caption.

The element may be used to annotate photos, illustrations, diagrams, quotations, code snippets, etc.

A caption can be associated with the element by inserting a <figcaption> within its start and end tags.

<figure>
   ...
   <figcaption> ... </figcaption>
</figure>

The figure, its caption, and its contents are referenced as a single unit.

While the content of the <figure> element is related to the main flow, its position is independent of the main flow, and if removed, should not affect the flow of the document.

The following example shows how the <figure> element may be used.

<figure>
   <img src="/shared/images/camp_gear.jpg"
      alt="camp essentials" />
   <figcaption><i>Camping essentials</i><figcaption>
</figure>

which would render on a Web page as follows:

The following example shows how CSS may be applied to alter the appearance of the contents of the <figure> element.

figure > img { border-radius: 20px 20px 0 0 }
figcaption {
   background-color: darkslategray; color: #fff;
   font: italic smaller sans-serif;
   padding: 8px; text-align: center;
}

which would render on a Web page as follows:

• 4.4.12 The figure element

FIGCAPTION