figure

Learn how to use the HTML <figure> element to semantically group an image with its caption, improving accessibility and document structure.

What it is

The <figure> element represents self-contained content, frequently with a caption (<figcaption>). It is designed for illustrations, diagrams, photos, code listings, or other units of content that are referenced from the main flow but can be moved independently without affecting the meaning. The mental model is "a standalone unit with a label." Related terms include semantic HTML, accessibility landmarks, and document outline.

Why it matters

• Semantic clarity: Screen readers announce figures as distinct regions, helping users understand context.
• Caption association: The <figcaption> is programmatically linked to the figure, unlike plain text below an image.
• Styling hooks: Provides a consistent container for CSS layout (e.g., centering images and captions together).
• Reflow resilience: Indicates that the content can be moved (e.g., to a sidebar) without breaking the narrative.

Syntax or steps

1. Wrap the media (image, video, etc.) in <figure>.
2. Add <figcaption> inside the figure, either before or after the media.
3. Ensure the image has appropriate alt text if it conveys information.

Example

<figure>
  <img src="chart.png" alt="Bar chart showing sales growth from 2020 to 2023">
  <figcaption>Figure 1: Annual Sales Growth</figcaption>
</figure>

Part-by-part explanation:

• <figure>: Opens the semantic container for the self-contained unit.
• <img ...>: The visual content. The alt attribute describes the chart's data for non-visual users.
• <figcaption>: Contains the visible caption. This text is associated with the figure by browsers and assistive technologies.
• </figure>: Closes the container.

Common mistakes

• Using <div> instead: A <div> lacks semantic meaning. Always prefer <figure> for grouped media and captions.
• Omitting alt text: If the image is decorative, use alt="". If informative, describe it. Never leave alt missing on meaningful images.
• Placing <figcaption> outside <figure>: The caption must be a direct child of the figure to be associated correctly.
• Using figures for every image: Only use <figure> when the image is referenced in the text or needs a caption. Inline icons do not need this wrapper.

When to use it

Practice

Guided Exercise: Create a figure containing a placeholder image (src="placeholder.jpg") and a caption reading "Sample Diagram". Ensure the image has descriptive alt text.

Challenge: Modify your example so the caption appears above the image. Verify that the HTML remains valid and accessible.

Solution Hint: Simply move the <figcaption> tag to appear immediately after the opening <figure> tag.

Quick check

Question: Where must the <figcaption> element be placed?

Answer: As a direct child of the <figure> element, either before or after the media content.

Summary

The <figure> element provides semantic structure for self-contained media with captions, enhancing accessibility and maintainability. Use it when an image or diagram is referenced in the text and requires a formal label, rather than relying on generic containers like <div>.