Web Development

HTML5 figure and figure caption elements

Ryan Boudreaux shares a demonstration of the HTML5 and CSS for the figure and figure caption elements.

Browse any book or printed material and typically you will find a caption under each figure, graphic, image, table, or graph. Many non-semantic ways of duplicating a figure caption on the web include fancy CSS styles, table rows, nested div containers or other ways of charming and captivating the content. This demonstration and review will encompass the <figure> element, the <figcaption> element, the nesting of multiple figure elements, and the benefits for users who access content defined with the two elements. The HTML, CSS, and png image files utilized in this demonstration are available in the download at the end of this article.

With the HTML5 figure <figure> and figure caption <figcaption> elements we can now semantically mark up content such as visuals, diagrams, graphs, charts, drawings, and images. Each has a slightly different way of presenting the content; the W3C Working Draft defines the figure in this way: "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." And the figure caption or figcaption as it is also known is defined in this manner: "The figcaption element represents a caption or legend for a figure." In summary, the figure has an option of including a caption and the figcaption represents the caption for a figure.

Figure element

Let's break down each of the two elements into more detail, starting with the figure <figure> element. According to the specification the permitted contents for the figure element include one figcaption element followed by the flow content, or the flow content followed by an optional figcaption element. The permitted attributes include any global attributes such as those that are common to all elements in the HTML language, and the figure element must have a start tag and an end tag. Permitted parent elements include any element that contains flow elements. A typical default display property might look something like this example:

figure  {
  display: block;
  margin-before: 1em;
  margin-after: 1em;
  margin-start: 40px;
  margin-end: 40px;
}

And let's add the following CSS properties:

body {
       display: block;
}
img {
  border: 1px solid #323232;
  padding: 5px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 3px 3px 5px rgba(50, 50, 50, .5);
}

Next, let's create an example figure with image content. We will start with the HTML code snippet shown below:

<figure><img src="i/Picture1.png" width="400" alt="Picture 1" title="Picture 1"></figure>
The resulting image is displayed in Google Chrome Version 22.0.1229.94 m in Figure A below:

Figure A

Figcaption element

Now, let's add in a figure caption to our figure element; essentially, the <figcaption> element gets nested inside any <figure> element to add a caption text to the associated figure. The specification permits any content within flow content, and within any globally permitted attributes. The tag for the figcaption element must have a start tag and an end tag, and the permitted parent element is the figure element.

Since I've already included the display block style to the CSS for this demo I will not add it specifically to the figcaption element, however, the typical default display properties include the following CSS:

figcaption {
  display: block;
}

The CSS that I have included for the demonstration of the figcaption is displayed in the code snippet below:

figcaption {
  padding: 5px;
  font-family: 'Cherry Swash', cursive;
  font-size: 1em;
  font-weight: 700;
  border: none;
  background: transparent;
  word-wrap:normal;
  text-align: center;
}
a {
  text-decoration:none;
}

And the HTML code snippet for the figcaption is displayed below:

<figure>
  <img src="i/Picture2.png" width="400" alt="Picture 2" title="Picture 2">
     <figcaption>Sitting stick figures hunched over their laptops! See <a href="#">more</a>.
     </figcaption>
</figure>
The anchor hyperlink reference in the above <figcaption> element is pointing to a dummy URL, it is only a placeholder to show how linking can be incorporated into a figure caption element. The resulting image as displayed in Google Chrome Version 22.0.1229.94 m is shown in Figure B below:

Figure B

Nested figures

What if you want to nest your figures into a grouping of similar figures? The related figures should be grouped by relationship and categorized by any number of options, including subject, topic, author, title, or date, for example. The Paciello Group Blog provides a good article on HTML5 Accessibility using nested figure elements, where Steve Faulkner explains various options and provides examples. The caption text can be made visible by default, hidden, or shown on hover or focus. Steve explains that on some occasions the requirement may not make it necessary to display the caption text of an associated figure.

You might think it a shortcut to mark up multiple images or content within a single <figure> element; however, this is not good coding since the element is supposed to be semantic markup for one figure. Structural HTML5 elements such as <section>, <article>, and <aside> would be a better use for containing multiple <figure> elements. I have included a sample HTML code snippet for proper nesting of <figure> elements below, where the figure element is given an Accessible Rich Internet Applications (WAI-ARIA) Role Model designation of role="group" setting. The ARIA group setting is used to indicate the semantics of the <figure> element and to specify the labeling relationship of the <figcaption> element for screen readers and adaptive technologies.

<figure role="group">
  <figcaption>Stick Figures with Laptops</figcaption>
  <figure>
    <img src="i/Picture1.png" width="400" alt="Picture 1" title="Picture 1">
      <figcaption>Two stick figures shaking hands.</figcaption>
  </figure>
  <figure>
    <img src="i/Picture2.png" width="400" alt="Picture 2" title="Picture 2">
    <figcaption>Four stick figures with laptops.</figcaption>
  </figure>
</figure>
The resulting output as displayed in Google Chrome Version 22.0.1229.94 m is shown in Figure C below:

Figure C

Each image is contained within its own nested figure <figure>element, all of them are contained within the <figure role="group"> figure element, and each is accompanied with an associated figure caption <figcaption> below each image.

According to the W3C Working Draft on text alternatives, the benefits of using <figure> and <figcaption> elements for your images, figures, illustrations and such on the web include:

  • The figure and figcaption elements provide a method to explicitly associate a caption with a variety of content including images. Any content inside the figure element that is not contained within the figcaption element is labeled by the content of the figcaption element.
  • When supported by browsers and assistive technology the content of the figcaption will be explicitly associated with the image.
  • The figcaption content may be a text alternative for the image, preventing the need for a text alternative provided using the alt attribute. This would only be the case if the figcaption content provides an adequate text alternative for the visual content in the image.
I have provided a download of the HTML, CSS, and png image files utilized in this demonstration.

About

Ryan has performed in a broad range of technology support roles for electric-generation utilities, including nuclear power plants, and for the telecommunications industry. He has worked in web development for the restaurant industry and the Federal g...

0 comments