ā† Back to All Tags

<figure>

Specifies self-contained content

āœØ HTML5

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

The <figure> tag is supported in all major browsers:

Chrome
Chrome
8.0+
Firefox
Firefox
4.0+
Safari
Safari
5.1+
Edge
Edge
9.0+
Opera
Opera
11.0+

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

<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

<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

<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

<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

<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

<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
  • Improves image search rankings
  • 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

Default CSS Settings

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

Default CSS

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

Related Tags