<figure></figure> tag HTML

Example

A simple <figure> tag:

<figure>
    <img src="/pic.jpg" alt="pnldev" style="width:50%">
    <figcaption>Fig.1 - pnldev, best website for learning programming.</figcaption>
</figure>

Laboratory

description & Usage

<figure> is used to specify self-contained content in an [HTML page]

The key thing to note is that the contents of a <figure> should be self-contained that is independent of the main flow of the document, so that if removed it does not affect the main flow of the document. The content is simply a supplement to the main text.

The <figcaption> tag provides a caption for the <figure> element.

Please see the <figcaption> tag page.

Browser compatibility and Support

#	Chrome	Edge	Firefox	Safari	Opera
<figure>

Global Attributes

The <figure> tag supports the HTML Global Attributes.

Event Attributes

The <figure> tag supports the HTML Event Attributes.

Default CSS

Most browsers will display the <figure> tag with the following default style:

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