Definition and Usage

The <figure> tag represents self-contained content related to the main flow of the document, such as images, diagrams, or code blocks.
Optionally, you can use the <figcaption> tag to add a caption (or legend) that references this content.

Usage Notes

  • The content of the <figure> tag is part of the surrounding content flow.
  • Do not think of the <figure> tag as merely a wrapper for an image, photo, chart, code listing, or other related content.
  • This tag represents "self-contained content" that is related to the main flow of the document, much like a complete sentence. Examples include images, photos, charts, diagrams, code blocks, and various types of media that help illustrate the surrounding content.
  • Here, "self-contained content" means that even if this portion is removed from the document, it still retains its own meaning.
  • If the content is separate from the main content flow, the <aside> tag is more appropriate.

Practical Examples

The following examples make it easy to understand how the <figure> tag is used.

Example with a Simple Image

In this example, the <figure> tag uses an <img> tag as its content to help illustrate the surrounding text.

HTML 
<p>The Earth, home to humanity, is beautiful.</p>
<figure>
    <img src="earth.jpg" alt="Earth glowing blue from space">
</figure>
Rendered Output

Adding a Caption with the <figcaption> Tag

This example uses the <figcaption> tag to add a caption that references the content.

Additional Explanation
The <figcaption> tag is used only to provide a caption or legend that references the content of its parent <figure> tag.

HTML 
<p>The Earth, home to humanity, is beautiful.</p>
<figure>
    <img src="earth.jpg" alt="Earth glowing blue from space">
    <figcaption>Earth viewed from space</figcaption>
</figure>
CSS Styled the <figcaption> tag 
figcaption {
    background-color: #d1d1d1;
    text-align: center;
    padding: 4px;
}
Rendered Output

<figcaption> usage notes:

  • The <figcaption> tag is used only to provide a caption or legend that references the content of its parent <figure> tag.
  • It is optional, but when used, it must be placed as either the first or last child of the <figure> tag.

Using a Background Image with CSS

The <figure> tag does not necessarily need to contain direct content.
The following example uses the CSS background-image property to display a background image inside the <figure> tag.

HTML 
<p>The Earth, home to humanity, is beautiful.</p>
<figure></figure>
CSS 
figure {
    background-image: url("earth.jpg");
}
Rendered Output

You might wonder about this example. The <figure> tag represents self-contained content related to the surrounding flow. Usage like this is appropriate only when the background image is purely decorative, does not contain essential information, and therefore does not harm accessibility for visually impaired users.

Example with a Video

In this example, the <figure> tag uses a <video> tag as its content to help illustrate the surrounding text.

HTML 
<p>The Earth, home to humanity, is beautiful.</p>
<figure>
    <video src="earth.mp4" muted autoplay playsinline loop></video>
</figure>
The Complete Guide to HTML <video> Tag Autoplay

Example with a Code Block

Code blocks are often used in technical documentation. In this example, the <figure> tag contains a code block to make the explanation easier to understand.

HTML 
<p>The typeof operator returns the data type of its operand as a string.</p>
<figure>
    <figcaption>Basic example of the typeof operator</figcaption>
    <pre>
        <code>
            let a;
            console.log(typeof a); // Output: "undefined"
        </code>
    </pre>
</figure>

Code Explanation
The <pre> tag is used to represent a block of text with preserved formatting.
This means that indentation, line breaks, and spaces are displayed exactly as written in the browser.

Code Explanation
The <code> tag is used to represent a fragment of computer code.

Rendered Output

As shown in these examples, the <figure> tag can be used to represent independent content related to the main content flow, such as images, illustrations, charts, photos, code listings, or other relevant media.

Technical Syntax Summary

Technical Syntax Summary of the <figure> tag
Permitted parents Where flow content is expected.
Permitted content Flow content. Optionally, a single <figcaption> may appear as the first or last child.
Implicit ARIA role figure
Permitted ARIA roles With no <figcaption> descendant: any, otherwise no permitted roles

Browser compatibility

Browser compatibility for the figure tag
Tag
Desktop Chrome
Chrome
DesktopDesktop Edge
Edge
Desktop Firefox
Firefox
Safari
Safari
<figure> 8 12 4 5.1

Specifications

Specification for the figure tag
Specification
<figure> HTML Standard
#the-figure-element

References

See also