<figure> tag

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.

<figure> <img src=”imagefilename”></figure>


  <img src="elephanta-caves-mumbai.jpg" alt="Elephant Caves, Mumbai" width="800" height="400">

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

NA NA New tag in HTML5

Attributes used with <figure> tag

No specific attribute

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.

supporting-browsers for tags

Related Tags

  • <figcaption> – To add caption to the <figure> element.
  • <img> tag.

Tutorials for all brains!