HTML <figure> tag

The <figure> tag is used to define self-contained content (like chart, image, code etc.) related to the main content. The flow of the other elements should not be disturbed by the adding and removal of the figure content. Within this element, the <figcaption> element is usually used to explain the diagram or image.

Type: Block Element

Syntax of <figure> tag

<figure>
  Content (Chart or image)
  <figcaption> Caption </figcaption>
</figure>
<figure> tag is new in HTML 5.

Supported Browsers

Tag Chrome Internet Explorer Firefox Safari Opera Mini
<figure> 6.0 or higher 9.0 or higher 4.0 or higher 5.0 or higher 11.1 or higher

Full code example

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<figure>
  <img src="bala.jpg" height="200px" width="200px">
  <figcaption> <i> Fig. 1 </i> Bala Hijam </figcaption>
</figure>
</body>
</html>
Run The code »

Output on the browser

Fig. 1 Bala Hijam
<figcaption> tag is used to define caption of the figure content.

Default CSS property of <figure> tag

figure {
  display:block;
  margin:1em 40px 1em 40px;
}