Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > HTML/XHTML

  • Print
  • + Share This
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 (red_circle-a.jpg and red_circle-b.jpg). 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 gray_circle-a.jpg.

red_circle-a.jpg 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 gray_circle-b.jpg.

...

<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>
04_03.jpg

red_circle-b.jpg 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

  1. Type <figure>.
  2. Optionally, type <figcaption> to begin the figure’s caption.
  3. Type the caption text.
  4. Type </figcaption> if you created a caption in steps 2 and 3.
  5. Create your figure by adding code for images, videos, data tables, and so on.
  6. If you didn’t include a figcaption before your figure’s content, optionally follow steps 2–4 to add one after the content.
  7. Type </figure>.
  • + Share This
  • 🔖 Save To Your Account