New in HTML5.

HTML Figure Element: Here’s How It Identifies Self-Contained Content

Disclosure: Your support helps keep the site running! We earn a referral fee for some of the services we recommend on this page. Learn more
Element of
Web Images: Best Practices and HTML Code In One Useful Guide
What does HTML Figure Element: Here’s How It Identifies Self-Contained Content do?
The <figure> element identifies self-contained content related to the main content, such as an image, table, or chart. The <figcaption> element is often nested within a <figure> element to add a caption to the content identified by the <figure> tags.

Code Example

<img src="/wp-content/uploads/flamingo.jpg" alt="flamingo">
<figcaption><i>fig. 1</i> A pink flamingo.</figcaption>
fig. 1 A pink flamingo.

Self contained content

The <figure> element is new in HTML5, and is one of those elements that the web development community is still just a little unsure of. Here is what the W3C specification says about it:

The figure element represents a unit of content, optionally with a caption, that is self-contained, that is typically referenced as a single unit from the main flow of the document, and that can be moved away from the main flow of the document without affecting the document’s meaning.

Further, it specifies that the contents of the <figure> element should be flow content, with an optional caption either before or after the content. In theory, this could be used for several types of things: sidebars, pullquotes, asides, charts, images, secondary media. In practice, the most common use is for captioned images and charts. This makes sense, as “figure” has a meaning in academic and technical writing — an illustration, image, chart, or other visual content, usually captioned, related to the main content but often found separated from it. There is no reason, though, that it couldn’t be used for some of those other purposes.

<figure> vs. <aside>

The <figure> and <aside> element seem to have similar uses, according to the specification. Some people use <aside> for pull quotes and content-related sidebars, so there is some overlap. But there are also some differences. The major difference, of course, is that <aside> doesn’t have a built-in caption element. So if you side-content requires a caption, that might indicate that it is really a <figure>. More importantly, though, the <figure> is for content directly related to the main content, while <aside> is for “tangentially related” content. This suggests that pull-quotes, infographics, charts, and other content specific to a particular article of content should be placed in a <figure>, while the <aside> element should be used for sidebar sections and (perhaps) comments.

Adam is a technical writer who specializes in developer documentation and tutorials.

Browser Support for figure