HTML Tag Reference - HTML tag <figure>
A figure is a unit of content, optionally with a caption.
The figure element can optionally contain a figcaption element.
<figcaption> marks a caption for the figure.
Add caption to an image
<figure>
<img alt="Bar chart"
src="http://java2s.com/style/download.png"/>
<figcaption>
Website analytics
</figcaption>
</figure>
Adding caption for more than one image
<figure> <img alt="chart format" src="october.jpg" /> <img alt="chart format" src="november.jpg" /> <img alt="chart format" src="december.jpg" /> <figcaption> website analytics </figcaption> </figure>
Browser compatibility
 |
 |
 |
 |
 |
|
|---|---|---|---|---|---|
<figure> |
Yes | Yes | Yes | Yes | Yes |
What's new in HTML5
The <figure> tag is new in HTML5.
Global Attributes
The <figure> tag supports the Global Attributes in HTML.
Event Attributes
The <figure> tag supports the Event Attributes in HTML.
Default CSS Settings
figure {
display: block;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 40px;
margin-right: 40px;
}
Example
A demo showing how to use <figure> tag.
<!DOCTYPE HTML>
<html>
<body>
<figure>
<figcaption>Listing 1. Caption text</figcaption>
<p>
This is the content of the figure.
</p>
</figure>
</body> <!-- w ww. j a va 2 s.c o m-->
</html>