HTML <figure> element

The <figure> element represents self-contained content. That content might be an image, diagram, chart, code example, photograph, illustration, table, quotation, or any other piece of material that can be understood as a unit.

Self-contained does not mean independent of the surrounding explanation. A diagram may need the lesson around it, while still forming a complete unit that the lesson refers to. Think of something you could label "Figure 1" or "Example 2" and discuss as a whole.

A <figure> can have one <figcaption>, but the caption is optional. When present, it must be the first or last child of the figure. The content and caption then belong together as one small packet of meaning.

A figure can contain several items, such as two photographs being compared, under a single caption. It can also be the main content of a page, as a photograph might be in a gallery; it is not restricted to supporting material at the side.

An image does not automatically need a figure around it. A small icon within a sentence belongs to that sentence, while a decorative background is usually handled by CSS. The reason to use <figure> is to group a meaningful unit, rather than simply to put a box around an image.

The example below groups a CSS rule with its explanation. The <pre> preserves the code's line breaks, <code> identifies it as code, and <figure> keeps the listing and its caption together.

Attributes: GLOBALS.

Typical layout:
<figure>
  <pre><code>p {
  color: navy;
}</code></pre>
  <figcaption>This rule gives paragraphs navy text.</figcaption>
</figure>

Visual representation:

p {
  color: navy;
}