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.
<figure>
<img src="/img/html/sangiorgio.jpg">
</figure>
The <figure> tag creates a container that can embed any of the following:
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.
A <figure> with an image and a caption.
The border shows that <figure> is a block-level container with multiple elements.
<figure style="padding:4px;border:4px solid lightblue;">
<img src="/img/html/vangogh-lg.jpg">
<figcaption>Fig.1 - Van Gogh, Self Portrait</figcaption>
</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.
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 |
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 |
