How Do You Figure

What Is the Figure Element?

The <figure> element is a semantic HTML5 container designed to encapsulate self-contained content that is referenced from the main content of your page. Unlike a generic <div>, figure carries meaning--it tells the browser and assistive technologies that this content forms a complete, meaningful unit that could theoretically be moved to an appendix or sidebar without breaking the flow of your document.

Use <figure> when your content meets these criteria:

• It relates to the surrounding content
• It can be understood on its own
• It makes sense if moved elsewhere in the document

This includes photographs with captions, diagrams or charts that need explanation, code snippets with descriptions, illustrations, and even blockquotes that need attribution. By using semantic elements like <figure>, you build a foundation of structured content that both users and search engines can easily understand.

The Power of Semantic Markup

Before HTML5, developers used <div class="figure"> or similar workarounds to group images with captions. These solutions worked visually but carried no semantic meaning. With <figure> and <figcaption>, that relationship becomes explicit and machine-readable.

Understanding Figcaption: The Caption Element

The <figcaption> element provides a visible caption or legend for its parent <figure> element. It can appear as the first or last child of the figure, which determines whether it displays above or below the content.

Caption Positioning Options

HTML allows the figcaption element to be either the first or last element inside the figure:

• First position: Caption appears above the content (ideal for diagrams that need context first)
• Last position: Caption appears below the content (matches traditional print conventions)

You can override this positioning with CSS if needed, but the document order provides a sensible default.

What Goes in a Caption?

Captions should provide context, explanation, or attribution:

• For photographs: Subject, location, date, or photographer attribution
• For charts: What data is displayed and any notable trends
• For code: What the code does and when you'd use it
• For diagrams: How to interpret the visual and its relationship to surrounding content

Avoid captions that simply repeat alt text. The alt text serves accessibility when images fail to load; the figcaption provides additional context for everyone. This layered approach to content description ensures that both accessibility tools and human readers get the information they need.

Code Examples and Practical Applications

Basic Image with Caption

The most common use case is wrapping an image with its descriptive caption:

<figure>
 <img src="architecture-diagram.png" alt="System architecture showing frontend, API layer, and database">
 <figcaption>Figure 1: Modern three-tier web application architecture with client-side rendering, RESTful API backend, and persistent data storage.</figcaption>
</figure>

Grouping Multiple Related Images

The figure element can contain multiple images that share a single caption:

<figure>
 <img src="step-1.png" alt="User clicks the registration button">
 <img src="step-2.png" alt="Registration form appears with name and email fields">
 <img src="step-3.png" alt="User fills form and submits">
 <figcaption>A three-step user registration flow from initial action through form completion.</figcaption>
</figure>

Code Snippets with Explanations

Developers frequently need to present code with context:

<figure>
 <pre><code>function calculateTotal(items) {
 return items.reduce((sum, item) => sum + item.price, 0);
}</code></pre>
 <figcaption>Listing 2-3: A simple reduce function that calculates the total price from an array of item objects with price properties.</figcaption>
</figure>

For developers working with modern JavaScript, pairing figure with CSS Flexbox layouts creates responsive code documentation that adapts to any screen size.

CSS Styling Techniques

Basic Figure Styling

A fundamental figure style establishes visual separation:

figure {
 float: right;
 width: 30%;
 margin: 0.5em;
 padding: 0.5em;
 border: thin silver solid;
 text-align: center;
 font-style: italic;
 font-size: smaller;
}

The float property allows figures to sit alongside text content, while the width as a percentage keeps it proportional to its container.

Responsive Images Within Figures

To prevent images from overflowing their figure container:

figure {
 max-width: 100%;
}

figure img {
 width: 100%;
 height: auto;
}

Setting width: 100% on the image makes it scale to fit the figure's width, while height: auto maintains the aspect ratio. Understanding how CSS overflow properties work alongside these techniques ensures your content stays properly contained within its boundaries.

Caption Positioning with CSS

Use table display to control caption position:

figure {
 display: table;
 border-top: none;
 padding-top: 0;
}

figcaption {
 display: table-caption;
 caption-side: top;
 padding: 0.5em;
 border: thin silver solid;
 border-bottom: none;
}

This technique works regardless of whether figcaption appears first or last in the HTML.

Accessibility Benefits

Screen Reader Integration

The figure element has a built-in ARIA role of "figure" that assistive technologies recognize. When a screen reader encounters a figure, it announces the content and then the figcaption, creating a clear connection between them.

This programmatic relationship is impossible to achieve with generic div wrappers. Without semantic markup, a screen reader would announce an image, then a paragraph, then more content--never making clear that the paragraph was a caption for the image.

Meeting WCAG Guidelines

Proper use of figure and figcaption helps meet Web Content Accessibility Guidelines (WCAG) Success Criterion 1.1.1 for non-text content:

• Alt text on images provides fallback for non-visual contexts
• Figcaption gives additional context for all users
• The layered approach ensures comprehensive accessibility

Common Mistakes to Avoid

1. Using <p> for captions: Creates confusion for screen readers as they encounter alt text and paragraph text separately
2. Wrapping every image: Reserve figure for content that genuinely needs a caption
3. Redundant captions: Don't repeat alt text in figcaption--provide additional context instead

Performance Considerations

Images in figures benefit from lazy loading:

<figure>
 <img src="chart.png" alt="Monthly revenue chart" loading="lazy" width="800" height="600">
 <figcaption>Monthly revenue growth demonstrating consistent improvement.</figcaption>
</figure>

The loading="lazy" attribute defers loading off-screen images, improving initial page load performance. For sites with many figures, combining lazy loading with proper CSS performance techniques can significantly improve user experience.

SEO Advantages

Improved Image Indexing

Search engines use the semantic relationship between figure and figcaption to better understand image content. When a caption clearly describes what an image shows, search engines can more accurately index it for relevant queries.

The figcaption provides context that alt text alone can't always convey. While alt text describes the image visually, the caption can explain its significance, source, or relevance to the surrounding content. This semantic relationship is one of the many SEO best practices that help content perform better in search results.

Rich Snippet Potential

Well-structured figure and figcaption content can contribute to rich snippet eligibility. Search engines extract structured information from semantic HTML, and properly marked-up figures may appear with their captions in search results.

Content Organization Signals

Using semantic elements throughout your content signals quality to search engines. Pages with proper figure usage, alongside other semantic elements like article, section, and aside, demonstrate attention to proper HTML structure. This is part of a comprehensive approach to web development that prioritizes both user experience and search engine visibility.

Conclusion

The figure and figcaption elements represent HTML5's answer to a fundamental need: associating self-contained content with descriptive captions. Their semantic meaning improves accessibility for screen reader users, helps search engines understand your content, and provides a clear structure for both authors and maintainers.

Key takeaways:

1. Use figure for self-contained content that benefits from a caption
2. Position figcaption based on what information readers need first
3. Style responsively with width: 100% for images
4. Leverage semantic markup for accessibility and SEO
5. Reserve figure for meaningful content, not every decorative image

By using these elements appropriately, you create content that works better for everyone--whether they're browsing on a phone, using a screen reader, or searching for information in image results.

Related Resources

• The CSS Overflow Property - Learn about containing content within defined boundaries
• CSS Flexbox - Modern layout techniques for flexible content containers
• Learnings From A Webpagetest Session On CSS Tricks - Performance optimization for CSS-heavy pages
• Pseudo Class Selectors - Advanced CSS targeting techniques

Sources

1. WebAbility: Mastering the Figure HTML Tag for Semantic Web Design - Comprehensive guide covering figure semantics, accessibility benefits, and practical use cases
2. W3C: CSS Figures & Captions - Official W3C documentation with CSS styling techniques
3. MDN Web Docs: figcaption element - Official Mozilla documentation
4. Netgen: HTML and CSS Best Practices - Industry best practices for semantic markup