HTML - <figure> Tag

HTML <figure> tag is used to create self-contained content. The self-contained contents are diagrams, images, code examples, and so on.

The content of the <figure> tag is connected to the content of the main flow. It is viewed as a standalone unit. HTML <figcaption> tag can be used to give a caption or explanation to the content of the <figure> tag.

Syntax

<figure>
   ...
</figure>

Attribute

HTML figure tag supports Global and Event attributes of HTML.

Examples of HTML figure Tag

Bellow examples will illustrate the usage of figure tag. Where, when and how to use figure tag and how we can style that figure elements using CSS.

Creating figure Element using figure tag

In the following we are going to use the HTML <figure> tag .

<!DOCTYPE html>
<html>
<body>
   <figure>
      <img src="https://www.tutorialspoint.com/cg/images/logo.png" 
           alt="LOGO" />
   </figure>
</body>
</html>

Styling figure Element

here in this example we will set a rounded border arroud the figure and padding and margin on the element as well.

<!DOCTYPE html>
<html>

<head>
    <style>
        figure {
            margin: 20px;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 10px;
            background-color: #fff;
            display: inline-block;
        }
    </style>
</head>

<body>
    <figure>
            <img src="https://www.tutorialspoint.com/cg/images/logo.png" 
                 alt="LOGO" />
    </figure>
</body>

</html>

Caption on figure Element

Let’s look at the following example, where we are going to observe the difference between the <div> tag and the <figure>> tag.

<!DOCTYPE html>
<html>

<head>
    <style>
    .child {
        display: inline-block;
    }
    .child, img{
        border: 1px solid black;
    }
    </style>
</head>

<body>
    <div>
        <div class="child">
            <p>Using div Tag:</p>
            <div>
                <img src="https://www.tutorialspoint.com/cg/images/logo.png" 
                     alt="logo">
                <p>TutorialsPoint Logo</p>
            </div>
        </div>
        <div class="child">
            <p>Using figure Tag:</p>
            <figure>
                <img src="https://www.tutorialspoint.com/cg/images/logo.png" 
                     alt="Logo">
                <figcaption>TutorialsPoint Logo</figcaption>
            </figure>
        </div>
    </div>
</body>

</html>

Supported Browsers

Tag
figure	Yes 8.0	Yes 9.0	Yes 4.0	Yes 5.1	Yes 11.0

html_tags_reference.htm