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

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

  • Print
  • + Share This
  • 💬 Discuss
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 (red-a.jpg and red-b.jpg). A figure element may contain a chart, a photo, a graph, an illustration, a code segment, or similar self-contained content.

red-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 Image. (Note: figures aren’t required to be in an article, but it’s probably suitable in most cases.)

093figb.jpg

red-b.jpg 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 gray-a.jpg and gray-b.jpg), 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

  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>.
093figc.jpg

red-c.jpg 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/.

  • + Share This
  • 🔖 Save To Your Account

Discussions

comments powered by Disqus