New in HTML5.

<figure> HTML Tag

Element of
What does <figure> HTML Tag 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.

Browser Support for figure