Description

The HTML element <figure> is used to define a self-contained unit of content, that can be referenced as a single unit by the main content of the web page.

It can contain an image, a diagram, an illustration, or a code snippet.

Its position is independent of the main content, and it can be moved away from the main content without affecting the main content.

The below table summarizes its usage.

Usage Details
Placement It is displayed as a Block element.
Contents It can contain Block elements, Inline elements, and text.
In case the element <figcaption> is used, it must be either the first child or the last child of the <figure> element.
Tags Both opening and closing tags are required.
Versions HTML5

Syntax

Here is the basic syntax of the <figure> element.

<figure>...</figure>

Examples

In the below example, the <figure> element is used to define a self-contained block of content.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML Element - figure</title>
</head>
<body>
    <figure>
        <img src="/assets/logo/logo.png" alt="logo">
        <figcaption>Random Codez - Logo</figcaption>
    </figure>
</body>
</html>

Attributes

The following table shows the list of supported and unsupported attributes for the <figure> tag.

Attribute Type Details
Element-Specific Attributes The tag <figure> doesn't have any element-specific attributes.
Global Attributes Like all other HTML tags, the tag <figure> supports the HTML Global Attributes.
Event Attributes The tag <figure> also supports the HTML Event Attributes.

Browser Compatibility

The tag <figcaption> is supported in all modern browsers.

  • Google Chrome 6+
  • Internet Explorer or Edge 9+
  • Firefox 4+
  • Apple Safari 5.1+
  • Opera 11.1+

Related Links