The <figure> tag was introduced with HTML5 quite some time ago, though you may still be unfamiliar with what it does, or how it can be used in lots of different situations. In this tutorial, you'll learn the difference between <figure> and other comparable tags, and how you can begin using it to enhance the way you group items in your markup.
This is a beginner level tutorial, but will also serve as a useful refresher for others.
Typical Uses for <figure>
Let’s first see what the HTML5 Doctor has to say on the matter:
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. -Richard Clark
So, the figure element specifies self-contained content, such as illustrations and photos. This means that you'll always be using the figure tag to house something else.
One common misconception is that figure can only be used for images. In fact, it can be used to group any number of different things together, including, but not limited to, images, video, audio, and code blocks.
Defining Page Structure
The figure is a sectioning root, which means that it effectively isolates its content from its ancestor's structure. Whatever's inside the figure doesn't contribute to the document outline outside it. It behaves as a structural element of the page and can therefore contain its own headings, beginning with an <h1> and working down the hierarchy through <h2>, <h3> and so on, but this has no bearing on the hierarchy outside:
Elements such as this are often used to introduce external content to the document, like a quote for example. <fieldset> is another example of a sectioning root element.
Images
Here's a typical example of how the figure tag can be used to display an image.
1 |
<figure>
|
2 |
<img src="your-image.png" alt="Hello world! I am an image." /> |
3 |
</figure>
|
Now, you may be thinking, "Why bother wrapping my img tag in additional markup?" That's a fair question, but it begins to make sense once you realise that a <figure> can contain more than one child element, such as a caption.
There's also a tag for a figure caption, or rather, figcaption. Taking this into account, you'd be able to use it in the following manner.
1 |
<figure>
|
2 |
<img src="your-image.png" alt="Hello world! I am an image." /> |
3 |
<figcaption>What's up? I am a caption!</figcaption> |
4 |
</figure>
|
Multiple Images
Using just a series of img elements to display images together works fine, though each individual image would standalone as its own block of code, completely unrelated to any others. In cases where images share a relationship of some kind figure comes to the rescue. These three images are related and share a single summary in the figcaption.
1 |
<figure>
|
2 |
<img src="image1.png" alt="Image 1" /> |
3 |
<img src="image2.png" alt="Image 2" /> |
4 |
<img src="image3.png" alt="Image 3" /> |
5 |
<figcaption>Three different images, grouped together as a figure, and being captioned with figcaption.</figcaption> |
6 |
</figure>
|
Using <figure> for Code Blocks
The figure element's talent for grouping commonly-themed elements doesn't end there. Perhaps you want to group some inline code, along with a caption, in a tutorial for example, then you could use figure and figcaption in the following way:
1 |
<figure>
|
2 |
<p><code>Life is good, said HTML5 to XHTML.</code></p> |
3 |
<figcaption>In this code block, we see HTML5 speaking to XHTML.</figcaption> |
4 |
</figure>
|
figure can be used in this way with code, pre, and samp, making it easy to group code blocks.
Wrapping Up
That's it! You've learned how to use the figure element, along with figcaption and other elements to group multiple items together. How do you use the figure element at the moment? Will that change as a result of reading this quick tip? Tell us in the comments!
