HTML <figure> Tag
Example
<h2> Figure caption top </h2>
<figure>
<figcaption>Fig.1 - Demo.</figcaption>
<img src="demo/image.jpg" alt="demo" style="width:100%">
</figure>
<h2> Figure caption bottom </h2>
<figure>
<img src="demo/image.jpg" alt="demo" style="width:100%">
<figcaption>Fig.1 - Demo.</figcaption>
</figure>Meaning
The <firure> element specifies captions for elements. It also block level element.
The <figcaption> element is used to add a caption for the <figure> element.
Version: HTML5
Standard Syntax
<figure>
<img src="URL" alt="txt">
<figcaption>Figure Cation</figcaption>
</figure>Browser Support
Status
Global Attributes
<figure> element also supports the Global Attributes in HTML.
Event Attributes
<figure> element also supports the Event Attributes in HTML.
More Examples
Use for Poem
Example
<figure>
<p>He who knows not and knows not that he knows not is a fool; avoid him.<br>
He who knows not and knows that he knows not is a student; teach him.<br>
He who knows and knows not that he knows is asleep; wake him.<br>
He who knows and knows that he knows is a wise man; follow him.</p>
<figcaption> – Sanskrit Saying</figcaption>
</figure>Styling figure and figcaption elements.
Example
<style>
figure {
position: relative;
border: 1px #ddd solid;
padding: 4px;
margin: auto;
border-radius: 2px;
}
figcaption {
position: absolute;
bottom: 4px;
right: 4px;
background-color: rgba(0,0,0,0.7);
color: white;
font-style: italic;
padding: 2px 4px;
}
</style>By Default CSS Value(s)
Most of the browsers will display the <figure> element with the following by default value(s)
figure {
display: block;
margin-top: 16px;
margin-bottom: 16px;
margin-left: 40px;
margin-right: 40px;
}