figureelementin

The figure element is an HTML5 semantic container used to group media content with an optional caption. It signals to user agents and assistive technologies that the enclosed content forms a self-contained unit, typically a media artifact such as an image, diagram, illustration, chart, code snippet, or video, along with a caption that describes it.

A figure may contain various types of content, including images, diagrams, SVGs, canvases, audio or video elements, or even nested figures. The figcaption element provides a caption for the content and is commonly placed as the first or last child of the figure. Using figcaption helps describe the media for all users and improves accessibility.

Semantics and accessibility are central to the figure element. It should not be used solely for layout or styling; instead, it should convey a meaningful, self-contained media unit. When media inside a figure lacks sufficient description, provide alternative text or captions to ensure comprehension for screen readers.

Example: a simple figure with an image

<figure>

<img src="image.jpg" alt="A description of the image">

<figcaption>A concise caption describing the image.</figcaption>

</figure>

The figure element is supported across all modern browsers and can be styled with CSS like any other block-level element. It is commonly used within articles and sections to group media with contextual captions, while remaining distinct from non-semantic containers used purely for layout.