HTML <figure> and <figcaption>

Introduction

Do you add images, charts, or code snippets to your web content? If so, you need to know about HTML5's <figure> and <figcaption> elements. These powerful semantic elements help you present visual content with proper context and accessibility.

Many developers simply use <img> tags with text paragraphs, missing out on better semantic structure and accessibility benefits. The figure and figcaption elements solve this problem by creating a clear relationship between visual content and its description. You'll learn how to use these elements effectively, improve your website's accessibility, and create better-structured content that both users and search engines will appreciate.

What are Figure and Figcaption Elements?

The Figure Element

The <figure> element represents self-contained content that is typically referenced from the main content. It's like a container that groups related visual content together with its caption or description.

The Figcaption Element

The <figcaption> element provides a caption or description for the content inside a <figure> element. It must be placed as either the first or last child of the figure element.

Working Together

These elements work as a team to create semantic relationships between visual content and its explanatory text. The figure acts as the container, while figcaption provides the descriptive text.

Key Features and Characteristics

Semantic Relationship

The figure and figcaption elements create a clear semantic connection between visual content and its description, making it easier for browsers and assistive technologies to understand the relationship.

Accessibility Benefits

Screen readers can announce the caption when users encounter the figure, providing important context for visually impaired users.

Self-Contained Content

Content within a figure element should be self-contained and could theoretically be moved to another location (like an appendix) without affecting the document's flow.

Flexible Content Types

Figure elements can contain various types of content including images, illustrations, diagrams, code snippets, videos, and even multiple related items.

How Figure and Figcaption Work

Basic Syntax

<figure>
  <img src="diagram.jpg" alt="Website structure diagram">
  <figcaption>Figure 1: Basic website structure showing header, navigation, main content, and footer</figcaption>
</figure>

Caption Positioning

The figcaption can be placed at the beginning or end of the figure:

<!-- Caption at the beginning -->
<figure>
  <figcaption>Monthly sales data for 2025</figcaption>
  <img src="sales-chart.jpg" alt="Bar chart showing monthly sales">
</figure>

<!-- Caption at the end -->
<figure>
  <img src="sales-chart.jpg" alt="Bar chart showing monthly sales">
  <figcaption>Monthly sales data for 2025</figcaption>
</figure>

Practical Examples

Example 1: Simple Image with Caption

<figure>
  <img src="sunset-beach.jpg" alt="Golden sunset over ocean waves">
  <figcaption>A beautiful sunset at Malibu Beach, California</figcaption>
</figure>

Example 2: Multiple Related Images

<figure>
  <img src="before-renovation.jpg" alt="Kitchen before renovation">
  <img src="after-renovation.jpg" alt="Kitchen after renovation">
  <figcaption>Before and after photos of our kitchen renovation project</figcaption>
</figure>

Example 3: Chart or Diagram

<figure>
  <img src="web-development-process.png" alt="Flowchart showing web development steps">
  <figcaption>
    Figure 2: The web development process from planning to deployment
  </figcaption>
</figure>

Example 4: Video Content

<figure>
  <video controls width="400">
    <source src="tutorial-video.mp4" type="video/mp4">
    Your browser does not support the video tag.
  </video>
  <figcaption>Video tutorial: How to create your first HTML page</figcaption>
</figure>

Example 5: Quotation as Figure

<figure>
  <blockquote>
    <p>The best way to learn web development is by building real projects and experimenting with code.</p>
  </blockquote>
  <figcaption>
    — Sarah Johnson, <cite>Web Development Mastery</cite>
  </figcaption>
</figure>

Example 6: Data Table

<figure>
  <table>
    <thead>
      <tr>
        <th>Month</th>
        <th>Sales</th>
        <th>Growth</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>January</td>
        <td>$15,000</td>
        <td>+5%</td>
      </tr>
      <tr>
        <td>February</td>
        <td>$18,000</td>
        <td>+20%</td>
      </tr>
    </tbody>
  </table>
  <figcaption>Table 1: Monthly sales performance for Q1 2025</figcaption>
</figure>

Use Cases and Applications

When to Use Figure Elements

1. Images with Descriptions
   • Product photos with detailed descriptions
   • Tutorial screenshots with explanations
   • Infographics with context
2. Code Examples
   • Programming snippets with explanations
   • Configuration examples
   • Terminal commands with descriptions
3. Data Visualizations
   • Charts and graphs
   • Statistical tables
   • Research data presentations
4. Educational Content
   • Diagram explanations
   • Step-by-step visual guides
   • Scientific illustrations

Content That Works Well in Figures

• Illustrations and diagrams: Technical drawings, flowcharts, mind maps
• Photographs: Product images, event photos, before/after comparisons
• Code snippets: Examples, tutorials, documentation
• Data presentations: Charts, tables, statistical information
• Multimedia content: Videos, audio clips with descriptions
• Quotes and citations: Important quotations that need attribution

Advantages and Benefits

Accessibility Improvements

• Screen Reader Support: Assistive technologies can better understand the relationship between content and its description
• Context Provision: Users get immediate context about visual content
• Navigation Aid: Screen readers can announce captions when users encounter figures

SEO Benefits

• Content Context: Search engines better understand the purpose of images and visual content
• Rich Snippets: Properly structured figures may appear in enhanced search results
• Content Relevance: Captions provide additional text content for search indexing

Better Code Organization

• Semantic Structure: Clear relationship between visual content and descriptions
• Maintainability: Easier to update and modify content blocks
• Consistency: Standardized approach to presenting visual content

User Experience

• Clear Context: Users immediately understand what they're looking at
• Professional Appearance: Properly captioned content looks more polished
• Reduced Confusion: Eliminates guesswork about visual content meaning

Limitations and Considerations

Not for Decorative Images

Don't use figure elements for purely decorative images that don't add meaningful content to your page. These images should use regular img tags with empty alt attributes.

Caption Requirements

While figcaption is optional, it's highly recommended for accessibility. If you're not providing a caption, consider whether the content really needs to be in a figure element.

Positioning Limitations

The figcaption element can only be placed as the first or last child of the figure element. You cannot place it in the middle of multiple items within a figure.

Overuse Concerns

Not every image needs to be wrapped in a figure element. Use them when the visual content is referenced from the main text or when it needs a caption for clarity.

Best Practices

Essential Guidelines

• Always Include Meaningful Captions

<figure>
  <img src="chart.jpg" alt="Sales data chart">
  <figcaption>
    Quarterly sales increased by 23% compared to last year, 
    with mobile sales leading the growth
  </figcaption>
</figure>

• Use Descriptive Alt Text

<figure>
  <img src="process-diagram.jpg" alt="Five-step process flowchart from planning to deployment">
  <figcaption>Our standard web development workflow</figcaption>
</figure>

• Reference Figures in Your Text

<p>The development process follows five key stages (see Figure 1 below):</p>

<figure>
  <img src="development-stages.jpg" alt="Development process diagram">
  <figcaption>Figure 1: Five stages of web development</figcaption>
</figure>

Content Organization Tips

Do:

• Use figure for self-contained content that could be moved elsewhere
• Provide meaningful captions that add value
• Reference figures from your main content when appropriate
• Use consistent caption formatting throughout your site

Don't:

• Use figure for purely decorative images
• Wrap every image in a figure element
• Place figcaption anywhere except first or last in the figure
• Use vague or redundant captions

Caption Writing Best Practices

• Be Descriptive but Concise

<figcaption>
  User engagement increased 40% after implementing responsive design
</figcaption>

• Add Context When Needed

<figcaption>
  Screenshot of the new dashboard interface, showing improved navigation 
  and streamlined user controls
</figcaption>

• Include Figure Numbers for Reference

<figcaption>
  Figure 3: Comparison of loading times before and after optimization
</figcaption>

Styling Considerations

While this guide focuses on HTML structure, remember that figures and captions can be styled with CSS to match your site's design:

<figure class="centered-figure">
  <img src="important-diagram.jpg" alt="System architecture diagram">
  <figcaption class="figure-caption">
    System architecture showing database, server, and client relationships
  </figcaption>
</figure>

Conclusion

The HTML5 figure and figcaption elements are essential tools for creating accessible, well-structured web content. They provide semantic meaning to visual content, improve accessibility for users with disabilities, and help search engines better understand your content.

Remember that figure elements are for self-contained content that adds value to your main text, while figcaption provides essential context and description. Use them together to create professional, accessible presentations of images, code snippets, charts, and other visual content.

Start implementing these elements in your current projects by identifying visual content that would benefit from captions or descriptions. Focus on images that illustrate concepts, code examples that demonstrate techniques, and data visualizations that support your content. With proper use of figure and figcaption elements, you'll create more accessible and professional web content that serves all your users effectively.