HTML5 <figure> Tag

The HTML <figure> tag is used to represent self-contained content. This is frequently used with a caption (<figcaption>), and is typically referenced as a single unit.

The only content permitted inside this element is a <figcaption> element, followed by flow content. You can also use flow content followed by a <figcaption> element or flow content. Both the starting and ending tag are mandatory for this element. The parent of the <figure> tag can be any element that accepts flow content.

Usually a <figure> is an image, illustration, diagram, code snippet, etc., that is referenced in the main flow of a document, but that can be moved to another part of the document or to an appendix without affecting the main flow.

A caption can be associated with the <figure> element by inserting a <figcaption> inside it (as the first or the last child).

The following style is applied to this element by default:

figure {
  display: block;
  margin-before: 1em;
  margin-after: 1em;
  margin-start: 40px;
  margin-end: 40px;
}

Here is an example of using this tag:

<figure>
  <img src="link/to/fruit-basket.jpg"
  alt="A basket containing apples, oranges, grapes and many more fruits.">
  <figcaption>A Fruit Basket</figcaption>
</figure>

Attributes

This element only accepts global attributes.

Examples

See the Pen HTML figure Tag by Tutorialio (@tutorialio) on CodePen.

Further Reading

  1. Read more about the HTML <figure> element on MDN.
  2. You can also read the HTML <figure> tag reference on W3C.

Reader Comments

1. You can register or login to post a comment. Asking readers to register improves the quality of discussion.

2. As a registered user, you will also get to access features like choosing between a light and dark theme or anything else that we might implement in future.

Follow Us For Updates

FacebookTwitterGoogle+
Go To Top