HTML figure Tag

The HTML5 <figure> tag is used to group or annotate various diagrams, images, illustrations and code snippets.

• This <figure> tag is newly introduced in HTML5.

• A figure can be an illustration, flow of any document, any image or a code snippet or any document.

• You can define various elements like code, pre and img inside the figure element.

• Also, this is a block-level element.

HTML <figure> Tag - Syntax and Usage

The <figure> tag requires the start(opening) tag and end(closing) tag. Here is the required syntax for it:

<figure>
    ...content here
</figure>

HTML <figure> Tag Basic Example

Below we have a basic example for clear understanding of <figure> tag:

HTML <figure> Tag Attributes

This element does not have any specific attributes although this element supports Global attributes and Event attributes.

Default CSS Settings for HTML <figure> Tag

There is a default margin that gets added to the figure element by default.

figure {
    display: block;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 40px;
    margin-right: 40px;
}

If you want to remove the default margin, you can use the CSS styling margin: 0 auto; which we have also demonstrated in the live example above.

Browser Support for HTML <figure> tag

Following browsers support this attribute:

• Firefox 4+

• Google Chrome 6+

• Internet Explorer 9+

• Safari 5.1+

• Opera 11.1+