HTML <Figure> Tag

Definition

The <figure> tag is a self-contained piece of content, with an optional caption (<figcaption>), and typically referenced as a single unit from the main flow of the document.

Example

<figure>
  <img
    width="400"
    height="225"
    src="https://res.cloudinary.com/thewebmaster/image/upload/image/moon-earth.png"
    alt="Moon and Earth"
  />
  <figcaption>The Moon and Earth in Space</figcaption>
</figure>

Usage

• The <figure> element can hold self-contained content, such as a piece of code, a photo or image, a video, or poem. This is what HTML 5 specification has to say about the meaning of self-contained:

  “Self-contained” in this context does not necessarily mean independent. For example, each sentence in a paragraph is self-contained; an image that is part of a sentence would be inappropriate for figure, but an entire sentence made of images would be fitting.

• The <figure> element should be independant of the flow of the rest of the document, meaning it could be moved or even removed without affecting the flow of the document.

  The HTML5 specification recommends referencing a <figure> element using a number, rather than in reference to a relative position, such as “in the photograph above” so that it would not disrupt the page’s meaning if moved.

• Both the opening and closing tag must be used.

• You can add an optional <figcaption> child element to display a caption.

• Further examples include:

  • Code Listing:

    <figure>
      <figcaption>Listing 4. The primary core interface API declaration.</figcaption>
      <pre><code>function getGrades() {
        var args = Array.prototype.slice.call(arguments, 1, 3);
        return args;
    }</code></pre>
    </figure>

  • Poem:

    <figure>
      <p>The plates will still shift<br>
      and the clouds will still spew.<br>
      The sun will slowly rise<br>
      and the moon will follow too.<br>
      <figcaption>
        <cite>And The World Carries On</cite> by By Amy O Connor
      </figcaption>
    </figure>

Attributes

The <figure> element only supports the Global Attributes.

Best Practices

• The <figure> element should be used only where the contents are part of the surrounding flow. For content that is only partially or tangentially related or serves a different purpose than the surrounding flow, you should use the <aside> element. For example, a pull quote should be an <aside> element because it repeats what is already contained in the document.

Specification

• HTML Living Standard Specification
• HTML5 Specification

Browser Support

Desktop

Mobile