<figure>

Specifies self-contained content

✨ HTML5

Quick Answer

What is the HTML <figure> tag?

The <figure> tag represents self-contained content like images, diagrams, code listings, or illustrations, optionally with a caption using <figcaption>. It's a semantic HTML5 element that groups content referenced from the main document flow. This improves accessibility, SEO, and document structure clarity.

Definition and Usage

The <figure> element specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.

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

The <figcaption> element is used to add a caption for the <figure> element.

Tip: The <figcaption> element can be placed as the first or the last child of the <figure> element.

Note: The <figure> element is new in HTML5 and provides semantic meaning to self-contained content.

Browser support and standards

Browser rendering and modern HTML conformance are different questions. Check the current element reference for the browsers and features your project needs; the older source version table is not a current compatibility guarantee.

Read the MDN element reference

Attributes

The <figure> tag supports the Global Attributes in HTML.

The <figure> tag also supports the Event Attributes in HTML.

Examples

Image with Caption

Basic example of an image with caption:

Example

Unavailable or blocked: image “mountains.jpg”. Provide inline styles and scripts, embedded images or the missing HTML context. External requests and browser dialogs stay blocked.

<figure>
  <img src="mountains.jpg" alt="Mountains at sunset" />
  <figcaption>Fig.1 - View of the Rocky Mountains at sunset.</figcaption>
</figure>

Code Snippet with Caption

Using figure for code examples:

Example
<figure>
  <figcaption>Listing 1: JavaScript Hello World</figcaption>
  <pre><code>
function sayHello() {
  console.log('Hello, World!');
}
  </code></pre>
</figure>

Diagram with Caption

Figure element for diagrams and charts:

Example

Unavailable or blocked: image “flowchart.svg”. Provide inline styles and scripts, embedded images or the missing HTML context. External requests and browser dialogs stay blocked.

<figure>
  <img src="flowchart.svg" alt="Application workflow diagram" />
  <figcaption>Figure 2: User authentication workflow</figcaption>
</figure>

Chart with Data

Using figure for data visualizations:

Example

Unavailable or blocked: image “sales-chart.png”. Provide inline styles and scripts, embedded images or the missing HTML context. External requests and browser dialogs stay blocked.

<figure>
  <img src="sales-chart.png" alt="2024 quarterly sales chart" />
  <figcaption>Chart 1: Quarterly sales growth for 2024 showing 25% increase</figcaption>
</figure>

Video with Caption

Figure element with embedded video:

Example

Unavailable or blocked: media “tutorial.mp4”. Provide inline styles and scripts, embedded images or the missing HTML context. External requests and browser dialogs stay blocked.

<figure>
  <video controls width="600">
    <source src="tutorial.mp4" type="video/mp4" />
  </video>
  <figcaption>Video 1: Introduction to HTML5 semantic elements</figcaption>
</figure>

Multiple Images

Group multiple related images:

Example

Unavailable or blocked: image “photo1.jpg”; image “photo2.jpg”; image “photo3.jpg”. Provide inline styles and scripts, embedded images or the missing HTML context. External requests and browser dialogs stay blocked.

<figure>
  <img src="photo1.jpg" alt="Photo 1" />
  <img src="photo2.jpg" alt="Photo 2" />
  <img src="photo3.jpg" alt="Photo 3" />
  <figcaption>Gallery: Summer vacation photos from Italy</figcaption>
</figure>

Poem or Quote

Using figure for blockquotes or poetry:

Example
<figure>
  <blockquote>
    <p>Two roads diverged in a wood, and I—</p>
    <p>I took the one less traveled by,</p>
    <p>And that has made all the difference.</p>
  </blockquote>
  <figcaption>— Robert Frost, <cite>The Road Not Taken</cite></figcaption>
</figure>

Styled Figure with CSS

Customizing figure appearance:

Example

Approved-page light CSS-variable defaults are supplied: --border-color. The snippet includes CSS inside its HTML. Unavailable or blocked: image “nature.jpg”. Provide inline styles and scripts, embedded images or the missing HTML context. External requests and browser dialogs stay blocked.

<style>
  figure {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 20px;
    margin: 20px 0;
    background: #f9f9f9;
    max-width: 600px;
  }

  figure img {
    width: 100%;
    border-radius: 4px;
    display: block;
  }

  figcaption {
    margin-top: 12px;
    font-style: italic;
    color: #666;
    text-align: center;
    font-size: 14px;
  }
</style>

<figure>
  <img src="nature.jpg" alt="Beautiful nature scene">
  <figcaption>A serene landscape photograph</figcaption>
</figure>

Common Use Cases

Illustrations: Images that illustrate the content
Diagrams: Flowcharts, UML diagrams, architectural diagrams
Photos: Photographs with captions or credits
Code listings: Code examples with explanatory captions
Videos: Embedded videos with descriptive captions
Charts and graphs: Data visualizations with explanations
Quotes: Blockquotes with attribution
Poems: Poetry with author information

Figure vs Div Comparison

<figure> Element

Semantic meaning
Self-contained content
Can be moved without affecting flow
Better for SEO
Improved accessibility
Works with <figcaption>

<div> Element

No semantic meaning
Generic container
Used for styling/layout
Less informative to search engines
No special accessibility benefits
Requires custom caption solution

Best Practice: Use <figure> for self-contained content that could be moved to an appendix. Use <div> for generic containers with no semantic meaning.

Accessibility Benefits

Screen readers can identify figures and their captions
Creates a semantic relationship between content and caption
Helps users understand the context of images
Improves navigation for assistive technologies
Provides better document structure
Enhances understanding for all users

SEO Benefits

Search engines understand content structure better
Captions provide additional context for images
Groups an image with related content and an optional caption; the element alone does not guarantee an image-search ranking improvement.
Semantic HTML is favored by search algorithms
Better content indexing and categorization
Enhanced rich snippets in search results

Styling Figures with CSS

Common styling patterns for figure elements:

Example - Advanced Styling
/* Card-style figure */
figure {
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin: 30px 0;
  background: var(--bg-primary);
}

/* Responsive images */
figure img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}

/* Caption styling */
figcaption {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #e0e0e0;
  font-size: 14px;
  color: #666;
  line-height: 1.6;
}

/* Centered figure */
figure.centered {
  text-align: center;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

/* Figure with overlay caption */
figure.overlay {
  position: relative;
  margin: 0;
  padding: 0;
}

figure.overlay figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 15px;
  margin: 0;
  border-top: none;
}

/* Responsive layout */
@media (max-width: 768px) {
  figure {
    padding: 16px;
    margin: 20px 0;
  }

  figcaption {
    font-size: 12px;
  }
}

Best Practices

Use <figure> for content that is referenced from the main content
Include <figcaption> to provide context and description
Place figcaption as the first or last child of figure
Ensure content within figure is self-contained
Don't use figure just for styling - it has semantic meaning
Always include alt attributes on images within figures
Consider using numbered captions (Fig.1, Chart 2, etc.)
Make figures responsive with CSS
Test accessibility with screen readers

Try it Yourself

Interactive Example

Here's a live example of a styled figure:

[Image Content]

Figure 1: Example of a self-contained image with caption

Try in Code Playground

Default CSS Settings

Most browsers will display the <figure> element with the following default values:

Default CSS

Unavailable or blocked: markup context “Matching lesson markup is not supplied; this fragment uses a generic HTML scaffold.”. Provide inline styles and scripts, embedded images or the missing HTML context. External requests and browser dialogs stay blocked.

figure {
  display: block;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 40px;
  margin-right: 40px;
}

Related Tags

<figcaption>
Defines a caption for a figure
<img>
Defines an image
<picture>
Container for multiple images
<video>
Defines video content