HTML <figure> Tag

The HTML <figure> tag represents flow content that is self-contained and is typically referenced as a single unit from the main flow of the document.

The <figure> tag can be used for annotating illustrations, diagrams, photos, code listings, etc.

The HTML5 specification advises:

Self-contained in this context does not necessarily mean independent. For example, each sentence in a paragraph is self-contained; an image that is part of a sentence would be inappropriate for figure, but an entire sentence made of images would be fitting.

Syntax

The <figure> tag is written as <figure></figure> with the caption inserted between the start and end tags.

You can use the <figcaption> element to provide a caption for the contents of a <figure> element.

If used, the <figcaption> tag is placed either as the first child or last child of its parent <figure> tag.

Like this:

Or this:

Examples

Basic tag usage

Here, the <figure> tag is used to markup a fragment of sample code. In this instance, the <figcaption> tag is placed as the first child of the <figure> element.

Images

You can also use the <figure> to markup images. But not just any image. If the image is self-contained, then it is suitable for use within the <figure> element. For example, the main image in an image gallery is an ideal candidate for the <figure> element. Charts or diagrams are also good candidates for use with the <figure> tag, as long as they're part of the normal flow of the content.

It's OK to place more than one image into a <figure> element, as long as the whole group is self-contained content.

Here's an example of marking up an image with the <figure> tag:

Poetry/Lyrics

Poems and lyrics could also be marked up with the <figure> tag. Notice that the <cite> element is inside the <figcaption> element.

Attributes

Attributes can be added to an HTML element to provide more information about how the element should appear or behave.

There are 3 kinds of attributes that you can add to your HTML tags: Element-specific, global, and event handler content attributes.

The <figure> element accepts the following attributes.

Element-Specific Attributes

This table shows the attributes that are specific to the <figure> tag/element.

AttributeDescription
None 

Global Attributes

The following attributes are standard across all HTML5 elements. Therefore, you can use these attributes with the <figure> tag , as well as with all other HTML tags.

For a full explanation of these attributes, see HTML 5 global attributes.

Event Handler Content Attributes

Event handler content attributes enable you to invoke a script from within your HTML. The script is invoked when a certain "event" occurs. Each event handler content attribute deals with a different event.

Below are the standard HTML5 event handler content attributes.

Again, you can use any of these with the <figure> element, as well as any other HTML5 element.

For a full explanation of these attributes, see HTML 5 event handler content attributes.

Differences Between HTML 4 & HTML 5

The <figure> tag is new in HTML5.

To see more detail on the two versions see HTML5 <figure> Tag. Also check out the links to the official specifications below.

Template

Here's a template for the <figure> tag with all available attributes for the tag (based on HTML5). These are grouped into attribute types, each type separated by a space. In many cases, you will probably only need one or two (if any) attributes. Simply remove the attributes you don't need.

For more information on attributes for this tag, see HTML5 <figure> Tag.

Tag Details

For more details about the <figure> tag, see HTML5 <figure> Tag.

Specifications

Here are the official specifications for the <figure> element.

What's the Difference?

W3C creates "snapshot" specifications that don't change once defined. So the HTML5 specification won't change once it becomes an official recommendation. WHATWG on the other hand, develops a "living standard" that is updated on a regular basis. In general, you will probably find that the HTML living standard will be more closely aligned to the current W3C draft than to the HTML5 specification.