figcaption

Learn how to use the <figcaption> element to provide visible, contextual captions for images within a <figure> container.

What it is

The <figcaption> element represents a caption or legend for the rest of the contents of its parent <figure> element. While alt text describes an image for screen readers and fallback scenarios, <figcaption> provides human-readable context that is visually displayed alongside the media. It is part of the HTML5 semantic structure designed to group self-contained content like illustrations, diagrams, photos, or code listings.

Why it matters

• Visual Context: It allows you to add titles, source citations, or explanatory notes directly below or above an image without using generic paragraph tags.
• Semantic Structure: It clearly associates the caption with the figure, helping browsers and assistive technologies understand the relationship between the visual and the text.
• Styling Control: Because it is a distinct element, you can style the caption independently from the image (e.g., smaller font, italicized) using CSS.
• Accessibility Enhancement: When used correctly, it complements alt text by providing additional information that might be too verbose for a short alt attribute but necessary for sighted users.

Syntax or steps

1. Create a <figure> element to wrap your media.
2. Insert your <img> tag inside the figure.
3. Add a <figcaption> element as a direct child of the <figure>.
4. Place the <figcaption> either before or after the <img>, depending on your desired layout.

Example

<figure>
  <img src="solar-system.jpg" alt="Diagram of the solar system showing planets in orbit">
  <figcaption>Figure 1: The relative sizes and orbits of the inner planets.</figcaption>
</figure>

In this example, the <figure> acts as a container. The <img> has an alt attribute describing the visual content for accessibility. The <figcaption> contains "Figure 1...", which is visible text explaining what the diagram specifically highlights. This separation ensures the alt text remains concise while the caption provides detailed context.

Common mistakes

• Using <p> instead: Developers often put captions in a standard paragraph tag outside the figure. This loses the semantic link between the image and its description.
• Duplicating Alt Text: If the caption repeats the exact same information as the alt attribute, it creates redundancy. Use alt for identification ("A red car") and <figcaption> for context ("The 2024 model features improved aerodynamics").
• Nesting Issues: Ensure <figcaption> is a direct child of <figure>. Placing it inside another div within the figure can break styling expectations or semantic parsing in some contexts.
• Forgetting the Figure Wrapper: Using <figcaption> without a parent <figure> is invalid HTML and may cause rendering inconsistencies across browsers.

When to use it

Practice

Guided Exercise: Create a figure containing an image of a chart. Add a figcaption that states the data source (e.g., "Source: World Bank, 2023").

Challenge: Style the <figcaption> so it appears centered below the image with a font size of 0.9em and color gray. Hint: Use CSS selector figure figcaption { ... }.

Quick check

Question: Can a <figure> contain multiple <figcaption> elements?

Answer: No, according to the HTML specification, a <figure> should contain at most one <figcaption> element.

Summary

The <figcaption> element bridges the gap between machine-readable descriptions (alt) and human-readable context. By wrapping images in <figure> tags and adding captions, you create robust, accessible, and semantically correct web content.