START A COURSE

The HTML and CSS Blog:

The New Figure Tag Lets You Relate Images to their Captions

What you will Learn in This HTML Lesson

You will learn how to use the new HTML5 <figure> and <figcaption> tag to contain pictures and their captions.

But wait, we already have an <img> tag, what do we need <figure> for? The <figure> tag is meant to contain pictures and their related captions. It’s a way to organize your page content by grouping together captions and their related images.

The HTML figure tag

The <figure> tag is another great example of how you can make your markup more meaningful, and give you clues about what is actually in these containers you’re defining. Use <figure> and <figcaption> together to associate an image or video with its caption.

IMAGE TALK LIKE YODA I DO

<figure> and <figcaption>

Here’s an example of how the <figure> tag might be used:

<figure>

<img src=”beach-in-Hawaii.jpg” alt=”Our vacation to Hawaii”>

<figcaption>Our vacation to Hawaii</figcaption>

</figure>

Notice that the <figcaption> is nested inside of the <figure> tag. The <figure> tag is intended to be used together with the <figcaption> tag to mark up diagrams, charts, illustrations, and photos that have associated captions. The <figure> tag is a container, just like a <div> tag. It’s a great way to make sure a caption is grouped to its image.

The HTML figure and figcaption tags work together to relate images and their captions

The HTML figure and figcaption tags work together to relate images and their captions

Captions and Accessibility

It’s always good to imagine your website being read out loud. Does everything make sense without vision? It is better to reference your figures within the main text by the figure caption or number, rather than the physical layout. For example “see figure 3” is more clear than “see figure below” if you don’t have vision. Writing clear references will also help with responsive sites design. The layout can change in a responsive web page. The page can reflow on a big monitor, resulting in the figure appearing on the right of the story, and on small monitors the figure may appear below the main story.

The <figure> tag was intended for self-contained content with an optional caption. The <figure> tag can group together content that changes position within the flow of the main story; it is separate from the main flow of content, yet more important than content you might put into an <aside> tag.

The HTML figure tag

The <figure> tag is not Limited to Containing Pictures

If you begin to think of the <figure> tag as a container for self-container content, then it makes sense that it is not limited to containing pictures and captions! The <figurecaption> tag is optional. You can skip it if you don’t have any captions. The <figure> tag could contain a series of multiple images, as a way of grouping together multiple pictures, which may or may not have captions. The <figure> tag doesn’t even have to contain pictures. You might find it convenient as a container for video.

You could use the figure tag to group together multiple images

You could use the figure tag to group together multiple images.

Here are some additional types of content you could consider placing inside the figure tag:

  • pull quotes
  • video
  • audio
  • maps
  • charts
  • poems
  • code samples
  • statistics
The figure tag is great for relating a caption to a diagram, such as a key or legend that needs to stay with the image.

The figure tag is great for relating a caption to a diagram, such as a key or legend that needs to stay with the image. This is my tweepsmap, and it’s legend which shows which countries my twitter followers are coming from, courtesy of tweepsmap.

When Not to use <figure>

You may be thinking, “I’m going to use <figure> all the time now! For all the things! But wait, not so fast. There are a few instances where you should never use the <figure> tag.

  • logos
  • navigation
  • icons

Enjoy using this new container tag. Let your mark up be more semantic with the new HTML5 <figure> element.

The Easiest Way to Learn HTML and CSS
Hi! I'm Diane. I'm an experienced web design teacher in San Francisco. I produce music videos to help new coders learn HTML. I'm dedicated to helping you learn to code, with tons of songs, videos, tutorials and activities. All our tutorials are free and we're adding new lessons every day. Subscribe to get the latest post in your inbox.

HTML Lessons

©2013 Diane Presler. All rights reserved.