- Starting a New Paragraph
- Adding Author Contact Information
- Creating a Figure
- Specifying Time
- Marking Important and Emphasized Text
- Indicating a Citation or Reference
- Quoting Text
- Highlighting Text
- Explaining Abbreviations
- Defining a Term
- Creating Superscripts and Subscripts
- Noting Edits and Inaccurate Text
- Marking Up Code
- Using Preformatted Text
- Specifying Fine Print
- Creating a Line Break
- Creating Spans
- Other Elements
This chapter is from the book
This chapter is from the book
This chapter is from the book
Creating a Figure
As you well know, it’s a common convention in the print world to associate figures with text. A figure may be a chart, a graph, a photo, an illustration, a code segment, and so on. You’ve seen these at play in newspapers, magazines, reports, and more. Why, this very book has figures on most pages.
Prior to HTML5, there wasn’t an element designed for this purpose, so developers cobbled together solutions on their own, often involving the less-than-ideal, non-semantic div element. HTML5 changes that with figure and figcaption. By definition, a figure is a self-contained piece of content (with an optional caption) that is referred to by the main content of your document (
and 
). The optional figcaption is a figure’s caption or legend and may appear either at the beginning or at the end of a figure’s content 
.
This figure has a chart image, though more than one image or other types of content (such as a data table or video) are allowed as well. The figcaption element isn’t required, but it must be the first or last element in a figure if you do include it. A figure doesn’t have a default styling aside from starting on its own line in modern browsers 
.
... <body><article><h1>2011 Revenue by Industry</h1> ... [report content] ...<figure><figcaption>Figure 3: 2011 Revenue by Industry</figcaption><img src="chart-revenue.png" width="180" height="143" alt="Revenue chart: Clothing 42%, Toys 36%, Food 22%" /></figure><p>As Figure 3 illustrates, ... </p> ... [more report content] ...</article></body> </html>
The figure with the chart and caption appears within the article text. It would be simple to style the figure with CSS so, for example, it has a border and so the article text wraps around it.
To create a figure and figure caption
- Type <figure>.
- Optionally, type <figcaption> to begin the figure’s caption.
- Type the caption text.
- Type </figcaption> if you created a caption in steps 2 and 3.
- Create your figure by adding code for images, videos, data tables, and so on.
- If you didn’t include a figcaption before your figure’s content, optionally follow steps 2–4 to add one after the content.
- Type </figure>.
TIP
Typically, figure is part of the content that refers to it
, but it could also live elsewhere on the page or on another page, such as in an appendix.
TIP
The figure element may include multiple pieces of content. For instance, could include two charts: one for revenue and another for profits. Keep in mind, though, that regardless of how much content a figure has, only one figcaption is allowed.