HTML Tutorials

Dealing with figures

The last of the grouping elements relates to figures. HTML5 defines figures as “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”. This is a fairly general definition and can be applied more widely than the traditional idea of a figure, which is some form of illustration or diagram. You define figures using the figure element. The figure element can optionally contain a figcaption element, which denotes a caption for the figure. 

You can see the figure and figcaption elements used together below.

    <meta name="author" content="Adam Freeman"/>
    <meta name="description" content="A simple example"/>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    I like apples and oranges.
      <figcaption>Listing 23. Using the code element</figcaption>
      <code>var fruits = ["apples", "oranges", "mangoes", "cherries"];<br>
      document.writeln("I like " + fruits.length + " fruits");
    You can see other fruits I like <a href="fruitlist.html">here</a>.

In this example, we have used the figure element to create a figure around a code element. We have used the figcaption element to add a caption. Note that the figcaption element must be the first or last child of the figure element. You can see how the browser applies the style conventions for these elements below.