HTML <figure> Element
The <figure> element groups self-contained content that is related to the surrounding document but can usually be understood as a single unit. It is commonly used for images, illustrations, diagrams, code examples, charts, and similar content, and may include a <figcaption> element to provide a caption.
Syntax
<figure>
<img src="image.jpg" alt="Description of the image">
<figcaption>Caption describing the figure.</figcaption>
</figure>The <figure> element contains the related content and may contain one <figcaption> element as its first or last child to provide a caption for the figure.
Attributes
The <figure> element supports the global HTML attributes. It does not have any element-specific attributes.
Example
The following example groups a photograph and its caption inside a <figure> element:
Usage Notes
The <figure> element is appropriate when a group of content forms a meaningful unit that could be moved elsewhere on the page without changing the basic meaning or reading order of the surrounding content.
A figure is not limited to photographs. It can contain illustrations, diagrams, charts, code listings, tables, quotations, or other flow content when that content functions as a self-contained unit.
A <figure> may contain one <figcaption> element. When present, the <figcaption> must be the first or last child of the <figure>.
Do not use <figure> simply to apply margins or other visual styling around an image. Use it when the grouped content has a meaningful relationship that benefits from being treated as a single semantic unit.
When referring to a figure elsewhere in a document, a descriptive caption or identifier is usually more reliable than wording such as "the image above," because page layouts can change across different screen sizes.
Accessibility
Using <figure> with <figcaption> creates a semantic relationship between the grouped content and its caption, which can make the purpose of the content easier to understand.
A <figcaption> does not normally replace alternative text for an informative <img>. Images should still use appropriate alt text that communicates information needed by users who cannot see the image.
Avoid unnecessarily repeating the same information in both the image's alt text and the visible caption. The alternative text should describe information conveyed by the image, while the caption can provide additional context or explanation.
Browser Support
Baseline: Widely available indicates a feature has been supported by core browsers for at least 30 months. At this stage, the feature is considered stable and safe for most websites to use without needing to worry about compatibility issues or fallbacks, as it is supported by the vast majority of users' devices and browser versions.
For detailed browser compatibility information, see Can I Use: HTML <figure> Element .
Related Elements
<figcaption> - Provides a caption or description for the contents of a <figure> element.
<img> - Embeds an image in a document and is commonly placed inside a <figure>.
<picture> - Provides multiple image sources for responsive or format-based image selection and can be placed inside a <figure>.