Signup/Sign In

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+



About the author:
Aspiring Software developer working as a content writer. I like computer related subjects like Computer Networks, Operating system, CAO, Database, and I am also learning Python.