Media Content With Captions

There are a number of ways to publish images, videos, and other media content. This article will focus on the HTML figure tag and its corresponding figcaption tag.

The figure tag is commonly used for images, but can also be use for any other media that can be displayed on a web page: illustrations, diagrams, code, videos, even plain text.

The general purpose of the figure tag is to let you know that it is independent content. The tag's position in the flow of text on the page may be changed without affecting the meaning of the rest of the text. In other words, if you don't like where you put it initially, the entire figure tag can be moved elsewhere within the web page.

An example is a walk in a park. This article has an image of a park, but the image does not reference any specific part of the article. The image is a candidate for the figure tag.

This article may also mention a fish someone caught and have an image of that very fish. In this case, the image is referenced in the article and is best published where it is referenced. Optionally, the figure tag may still be used. Yet, the figure may be published within a div tag instead, or without a containing tag at all.

Note that there is one more benefit for using the figure tag, perhaps an overriding benefit: It signals screen readers (and their listeners) that the content is independent but related to the regular content on the page. Further, if a caption is provided with the figcaption tag, the screen reader associates the caption text with the figure content.

Here is an example image in the HTML figure tag.

The default figure tag container style is indents left and right with paragraph spacing above and below. The example has no additional CSS styling.

Here is the code for that example.

<figure>
<img src="https://www.willmaster.com/possibilities/images/202201041171_walk-in-a-park.jpg" style="max-width:100%;" alt="park image">
</figure>

Use CSS to change default figure characteristics.

Here is an example using CSS to style the figure container:

In the above, the display is specified as table so the container would not be wider than the image and the margin is specified as 0 so all margins are removed.

Here is the code.

<figure
   style="
      display:table; 
      margin:0; 
   ">
<img src="https://www.willmaster.com/possibilities/images/202201041171_walk-in-a-park.jpg" style="max-width:100%;" alt="park image">
</figure>

Earlier, I mentioned the figcaption tag.

It can be used to place a caption above or below the image or other content within the figure tag. Here is an example.

Here is the code for the above.

<figure 
   style="
      display:table; 
      margin:0; 
   ">
<img src="https://www.willmaster.com/possibilities/images/202201041171_walk-in-a-park.jpg" style="max-width:100%;" alt="park image">
<figcaption>
A park on a pleasant day.
</figcaption>
</figure>

Like the figure tag, the figcaption tag can be styled. Let's do that in a way that visually suggests it belongs to the image.

The caption was made white on black with the text centered.

<figure 
   style="
      display:table; 
      margin:0; 
   ">
<img src="https://www.willmaster.com/possibilities/images/202201041171_walk-in-a-park.jpg" style="max-width:100%;" alt="park image">
<figcaption 
   style="
      text-align:center;
      color:white;
      background-color:black;
   ">
A park on a pleasant day.
</figcaption>
</figure>

Just one more tweak and we'll call it good. Let's move the caption up so it touches the image.

It was done by adding CSS rules for position:relative and top:-.3em that moved the caption up 3 tenths of an em.

<figure 
   style="
      display:table; 
      margin:0; 
   ">
<img src="https://www.willmaster.com/possibilities/images/202201041171_walk-in-a-park.jpg" style="max-width:100%;" alt="park image">
<figcaption 
   style="
      position:relative;
      top:-.3em;
      text-align:center;
      color:white;
      background-color:black;
   ">
A park on a pleasant day.
</figcaption>
</figure>

The figure tag and the associated figcaption tag belong together. Keeping them together is kind to yourself and to others who may edit your code. It also tells screen readers which text is the caption for which media.

The tags may be styled with CSS to visually present the content as you prefer.

This article first appeared with an issue of the Possibilities newsletter.

Will Bontrager