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 <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:
<img src=”beach-in-Hawaii.jpg” alt=”Our vacation to Hawaii”>
<figcaption>Our vacation to Hawaii</figcaption>
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.
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 <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.
Here are some additional types of content you could consider placing inside the figure tag:
- pull quotes
- code samples
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.
Enjoy using this new container tag. Let your mark up be more semantic with the new HTML5 <figure> element.