HTML - <figure> Tag

Quiz

The <figure> Tag

The HTML <figure> tag is used to create self-contained content, such as diagrams, images, code examples, and more.

The content of the <figure> tag is related to the main flow of the document but is viewed as a standalone unit. The HTML <figcaption> tag can be used to provide a caption or explanation for the content within the <figure> tag.

Syntax

Following is the syntax of <figure> tag −

<figure>
   ...
</figure>

Attributes

The HTML <figure> tag supports both Global and Event attributes.

Example: Displaying a Figure Element

In the following section, we will use the HTML <figure> tag to display an image from the specified URL, with "LOGO" as the alternative text.

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

Example: Styling a Figure Element

This HTML code displays an image within a <figure> element, adding padding, margins, a border, and a background color. In this example, we will set a rounded border around the <figure> element, along with padding and margin.

<!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>

Example: Figure Element Caption

Lets look at the following example, where we will observe the difference between the <div> tag and the <figure> tag. This HTML code displays an image using both tags, with borders, captions for comparison.

<!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

Print Page