HTML <figure> Tag

If you find this helpful, please click the Google Button to the left, if it is white, to make it turn blue or red. Thank you! (It also helps find this page again more easily.)

The <figure> Tag in HTML 5

The <figure> tag provides a container for content that is equivalent to a figure or diagram in a book. It can be used to group a caption with one or more images, a block of code or other content. The content of a figure is often referenced in the main text of an article and is therefore more essential than content that might be included in an aside element.

The <figure> tag is one of the embedded content tags in HTML. It is also one of the sectioning root tags, which means that the sections and headings inside the figure element are not included in the outline of any higher level sections.

Figure with caption

figure pointing to figcaption below — Example of HTML <figure> with <figcaption>

This is an actual working example of the <figure> tag example code below.

<figure> Tag Syntax

<body>
   ...
   ... flow content expected ...
   <figure>
      <figcaption>
         ... flow content ...
      </figcaption>
      ... flow content ...
   </figure>
   ...
   ... flow content expected ...
   <figure>
      ... flow content ...
      <figcaption>
         ... flow content ...
      </figcaption>
   </figure>
   ...
</body>

Rules for coding HTML `figure` elements

Make sure you understand the difference between a tag and element and are familiar with the definitions of namespace and other HTML terms.

Include a figure element where flow content is expected.
Begin the figure element with a starting <figure> tag. The element name uses lower case letters and should be in the HTML namespace, which it will pick up automatically from the xmlns attribute on the <html> tag.
Inside the figure element, between the <figure> starting tag and the </figure> ending tag, code the inner HTML flow content. This is often an image or possibly SVG or MathML.
End the figure element with a matching </figure> closing tag.

Content of the figure element

The content of the figure element can include HTML comments, text content and any tags that can be used in flow content.

<figure> Tag Attributes

Attributes of the <figure> tag

global attributes

In addition to the personal attributes of the <figure> tag below, any of the common HTML attributes can also be coded.

<figure> Tag Examples

Examples of the `figure` tag in HTML 5

HTML <figure> with a caption

(see <figure> tag demo above)

<div style="text-align: center; margin: 1em">
   <figure>
      <img src="http://www.HTML-5.com/images/html-figure-with-figcaption.png"
         alt="figure pointing to figcaption below"
         style="border: 3px outset gray"
      /><br/>
      <figcaption>Example of HTML &lt;figure&gt; with &lt;figcaption&gt;</figcaption>
   </figure>
</div>

Changes in HTML 5 - <figure> Tag

What's new in HTML 5

The <figure> tag is one of the new elements in HTML 5.

Differences between HTML 5 and earlier versions of HTML

The <figure> tag did not exist in older versions of HTML.

The 2000-2010 Recommendations from the W3C HTML Working Group defined the HTML namespace for the names of all HTML element types, which now includes the figure element name. In older (pre-2000) versions of HTML, element type names were not associated with a namespace.

Valid HTML 5

HTML <figure> Tag