HTML <figcaption> Tag
Example
<h2> Figure caption top </h2>
<figure>
<figcaption>Fig.1 - Demo.</figcaption>
<img src="img-boy.jpg" alt="demo" style="width:100%">
</figure>
<h2> Figure caption bottom </h2>
<figure>
<img src="img-boy.jpg" alt="demo" style="width:100%">
<figcaption>Fig.1 - Demo.</figcaption>
</figure>Meaning
The <figcaption> element represents a caption or legend describing the rest of the contents of its parent <figure>.
Version: HTML5
Standard Syntax
<figure>
<img src="URL" alt="txt">
<figcaption>Figure Cation</figcaption>
</figure>Browser Support
Status
Global Attributes
<figcaption> element also supports the Global Attributes in HTML.
Event Attributes
<figcaption> 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> – Anonymous</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 <figcaption> element with the following by default value(s)
figcaption {
display: block;
}