HTML5 <figure> tag
The <figure> tag creates a self-contained media content with a caption.
The self-contained content is a single unit which includes figure, related caption and the content of the figure.
It is optional to set the caption of the <figure> tag but it is always better to set this using the <figcaption> element.
These self-contained contents can be images, code snippets, diagram, illustrations, Poems etc.
Syntax:
<figure> <img src=”imagefilename”></figure>
Example
<figure> <img src="elephanta-caves-mumbai.jpg" alt="Elephant Caves, Mumbai" width="800" height="400"> </figure>
Default CSS Values
display: block;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 40px;
margin-right: 40px;
How Browser will display
BLOCK Level.
Difference between HTML4.01, XHTML and HTML5
| HTML4 | XHTML | HTML5 |
|---|---|---|
| NA | NA | New tag in HTML5 |
Attributes used with <figure> tag
No specific attribute
Note/Info:
Even though the content of this tag relates to the main flow but its position does not depend on the main flow.
So, if you remove it, main flow will not get impacted.
Global Attributes
The <figure> tag supports Global attributes.
Event Attributes
The <figure> tag supports Event attributes.
Supporting Browsers
Internet Explorer and prior versions does not support the <figure> tag.
Related Tags
- <figcaption> – To add caption to the <figure> element.
- <img> tag.