- Adding a Paragraph
- Specifying Fine Print
- Marking Important and Emphasized Text
- Creating a Figure
- Indicating a Citation or Reference
- Quoting Text
- Specifying Time
- Explaining Abbreviations
- Defining a Term
- Creating Superscripts and Subscripts
- Adding Author Contact Information
- Noting Edits and Inaccurate Text
- Marking Up Code
- Using Preformatted Text
- Highlighting Text
- 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
No doubt you’ve seen figures in printed newspapers, magazines, reports, and more. Typically, figures are referenced from the main text on a page (like a news story). This very book has them on most pages.
Prior to HTML5, there wasn’t an element designed for this use, so developers cobbled together solutions on their own. This often involved the less-than-ideal, non-semantic div element. HTML5 has changed that with figure and figcaption (
and 
). A figure element may contain a chart, a photo, a graph, an illustration, a code segment, or similar self-contained 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 
. (Note: figures aren’t required to be in an article, but it’s probably suitable in most cases.)
The figure of the chart and caption appears within the article text. The figure is indented because of the browser’s default styling (see the last tip).
You may refer to a figure from other content on your page (as shown in 
and ), but it isn’t required. 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.
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. You can even nest one figure inside another one. Keep in mind, though, that regardless of how much content a figure has, only one figcaption is allowed per figure.
TIP
Modern browsers apply left and right margins of 40px to a figure by default 
. You can change that with the margin-left and margin-right CSS properties. For example, margin-left: 0; would make the figure flush left. Also, you can make the text containing a figure wrap around it with figure { float: left;} (so the text will wrap around the right side) or figure { float: right;} (so the text will wrap around the left side). You may need to set a width to the figure as well so it doesn’t occupy too much horizontal real estate. CSS coverage begins in Chapter 7, and the float and width properties are demonstrated in Chapter 11.
You can differentiate your figure from the surrounding text with just a little bit of CSS. This simple example is available at www.htmlcssvqs.com/8ed/figure-styled/.