HTML <figure> Tag

The <figure> tag renders an embedded object, usually an image, illustration, or infographic. A label or caption can be added by adding a <figcaption> inside the element.

HTML Tag

Example

#

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

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

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>
</figure>

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, these tags 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:

Chrome
6.0 Sep 2010
Firefox
4.0 Mar 2011
IE/Edge
9.0 Mar 2011
Opera
11.1 Mar 2011
Safari
5.0 Jun 2010

You may also like

Guides