1. Technology

Understanding the HTML5 Figure and Figcaption Elements

Adding Images and Data as Additional Information

By

The HTML5 FIGURE element is a new element created to allow designers to associate images and other units of content with the main flow of content while keeping them separate. A figure can be moved around in the content and even away from the main content without affecting the meaning of the document as a whole.

The key here is that the figure is essential to the main content of the page, but it's position on that page can change without affecting the meaning of the content.

With the FIGCAPTION element, you can associate figures with captions describing the figure.

Figures are More than Images

The most common use of the figure element is with images (with FIGCAPTION providing captions for those images), but that isn't the only thing you can put in a figure. You can also put in blocks of code, pull quotes, or any other content that is related to the main content, but not critical to the flow.

Here are some ways you can use the FIGURE element:

  • An image with or without a caption (Note: not all images should be figures, see below).
  • Code samples that can remain outside the flow of content.
  • Videos that are related to the content.
  • A comment or quotation related to the article could be placed in a FIGURE element.
  • Image maps to add clickable (or hoverable) areas on an image can be placed in a figure.

Not All Images Belong in Figures

It might be tempting to simply slap a FIGURE element around every image in your web pages, but this isn't correct. For best use of the FIGURE element, you should think about how the image is used. If you can answer yes to all of these questions, then the put the image in a FIGURE.

  • Is the image part of the content of the page?
  • Can the image appear anywhere within the content and not change the meaning?
  • Can the image appear outside of the content and maintain its meaning?

And here are some specific images that should never be inside a FIGURE element:

  • icons and site navigation images
  • logo images
  • images that must be in a specific place in the article (such as a step-by-step article with multiple images on the page)

How is a FIGURE Element Different from an ASIDE Element?

Another new element in HTML5 is the ASIDE element. The ASIDE element is another sectioning element that contains flow content. But unlike FIGURE, the content that is in an ASIDE is only tangentially related to the main content of the page. In other words, FIGURE content is directly related to the page contents and ASIDE content is only loosely related.

As for typical usage, most people use the FIGURE element to contain images and their captions, while ASIDE content is used for extra content on a page like what is found in many third columns on web pages.

How to Use FIGURE and FIGCAPTION

When you put a figure on your web page, browsers should simply display the image or other contents inside it as a block-level element (similar to a DIV). If you want any special formatting, you need to use CSS.

The FIGURE element is written like this:

<figure id="figure1">
  <img src="figure1.gif" alt="Figure 1: An image">
</figure>

Or with the FIGCAPTION element:

<figure id="figure2">
  <img src="shasta.jpg" alt="My Dog Shasta">
  <figcaption>My Dog Shasta</figcaption>
</figure>

The FIGCAPTION element can also come first, and you can have multiple images in one figure:

<figure id="figure3">
  <figcaption>Figure 1: My Dogs Shasta and McKinley</figcaption>
  <img src="shasta.jpg" alt="My Dog Shasta">
  <img src="mckinley.jpg" alt="My Dog McKinley">
</figure>

©2014 About.com. All rights reserved.