HTML <figure> Tag

The <figure> tag renders an embedded object, usually an image.

A caption can be added with a <figcaption> inside the element.



A <figure> tag that embeds an image of a painting.

  <img src="/img/html/sangiorgio.jpg">

Using <figure>

The <figure> tag creates a container that can embed any of the following:

  • Images
  • Illustrations
  • Infographics
  • Code Snippets
  • And others

A caption can be added by inserting a <figcaption> element.

The difference with <img> is that <figure> with all its content is treated as a unit.

More Examples

A <figure> with an image and a caption.
The border shows that <figure> is a block-level container with multiple elements.

Fig.1 - Van Gogh, Self Portrait
<figure style="padding:4px;border:4px solid lightblue;">
  <img src="/img/html/vangogh-lg.jpg">
  <figcaption>Fig.1 - Van Gogh, Self Portrait</figcaption>

Attributes for <figure>

The <figure> element has no attributes, but it does accept global attributes. The following are commonly used.

Attribute Value Description
id   value Provides the figure with a unique identifier.
class   classnames Assigns one or more classnames to the figure.
style   CSS-values Assigns CSS style values to the figure.
data-*   value Defines additional data that can be used by JavaScript.
hidden   hidden Specifies whether the figure is hidden.
title   text Sets a title that displays as a tooltip.

For additional global attributes see our global attributes list.

Media Tags

The <figure> tag is part of a group of tags that create multi-media experiences on the web. This group is referred to as the Media tag group. Together, they allow you to create powerful multi-media solutions.

Here is a list of media tags.

Element Description
<audio> Creates a player for sound such as music, sound effects, or others
<video> Creates a video player on a page
<source> Adds a media source for a <video>, <audio>, or <picture>
<track> Adds a text track, such as, subtitles and captions, to the media
<embed> Creates a container for an external resource
<iframe> Creates a frame in which another web page can be embedded
<svg> Displays an scalable vector image
<canvas> Creates a graphics container where JavaScript can draw
<img> Displays an image
<area> Specifies a map area for an image
<map> Defines a client-side image map, i.e. an image with clickable areas
<figure> Displays self-contained content, usually an image
<figcaption> Adds a caption to a <figure> (image) element

Browser support

Here is when <figure> support started for each browser:

6.0 Sep 2010
4.0 Mar 2011
9.0 Mar 2011
11.1 Mar 2011
5.0 Jun 2010

You may also like

Last updated on Sep 30, 2023