<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.
This tag embeds an image of a painting.
<figure> <img src="/img/html/sangiorgio.jpg"> </figure>
<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.
<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>
<figure> element has no attributes, but it does accept global attributes.
The following are commonly used.
|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.|
|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.
<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.
|<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|
|<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: