Core HTML

Lesson 34: Figures

Overview

In this HTML lesson, we demonstrate how to use the figure element. A typical figure consists of an image with a caption below it to provide a description of the image. Although that is what we most often think of as a figure, figures can be many things: images, poetry, paintings, programs, drawings, etc. Anything that is put together with a short description is appropriate for a figure. Semantically, a figure should be tightly bound to the article that it is contained in, unlike an aside element.

A Simple Image Figure

Our first example is typical figure with an image, a reference number, and a description. The main content of the figure is an image element that contains a picture of the planet Venus. Below this, the figurecaption element is used to label the image with a number and a description. A line break br element is place at the end of the image to put the caption on a new line, rather than to the right of the image.

A figure is meant to encapsulate the main content and the caption together so that they are treated as a whole. To illustrate this, we put a green border around the figure.

Example1.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    <figure>
      <img src="Venus.png" alt="Venus"><br />
      <figurecaption>Fig. 1 - Venus</figurecaption>
    </figure>
  </body>
</html>
 

Output

 
 

Output with Green Border

 

A Figure with Poetry

Figures can be used for more than images. In this example, we have made a figure out a portion of a poem. The main content is enclosed within a paragraph element with line breaks added to mark off the line of the poem. Below the poem, we have placed a caption with the title and author of the poem.

Example2.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    <figure>
      <p>
A little learning is a dangerous thing;<br />
Drink deep, or taste not the Pierian spring:<br />
There shallow draughts intoxicate the brain,<br />
And drinking largely sobers us again.<br />
Fired at first sight with what the Muse imparts,<br />
In fearless youth we tempt the heights of Arts,<br />
While from the bounded level of our mind<br />
Short views we take, nor see the lengths behind;<br />
But more advanced, behold with strange surprise<br />
New distant scenes of endless science rise!<br />
So pleased at first the towering Alps we try,<br />
Mount o'er the vales, and seem to tread the sky,<br />
The eternal snows appear already past,<br />
And the first clouds and mountains seem the last;<br />
But, those attained, we tremble to survey<br />
The growing labors of the lengthened way,<br />
The increasing prospects tire our wandering eyes,<br />
Hills peep o'er hills, and Alps on Alps arise!
      </p>
      <figurecaption><cite>An Essay on Criticism</cite> by Alexander Pope</figurecaption>
    </figure>
  </body>
</html>
 

Output

 

Putting the Caption First

The caption of a figure can be placed before or after the main content. In this example, we have put the caption, with the title and artist's name in it, before the image that it describes. This places the caption before the content. We remark that the figurecaption must be the first or last element inside a figure.

Example3.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    <figure>
      <figurecaption><cite>The Transfiguration of Our Lord</cite> by Lodovico Carracci</figurecaption><br />
      <img src="TransfigurationCarracci.png" alt="XoaX.net">
    </figure>
  </body>
</html>
 

Output

 

A Computer Program Figure

What comprises a figure can vary greatly. In this example, we have a short C++ program as the main content of our figure. Above the program, we have the file name of the program inside the caption element. The file name, main.cpp, is encosed in a strong element to make it stand out from the code.

Example4.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    <figure>
      <figurecaption><strong>main.cpp</strong></figurecaption>
      <pre>
#include &lt;iostream&gt;

int main() {
    std::cout &lt;&lt; "Deus Caritas Est!" &lt;&lt; std::endl;
    std::cin.get();
    return 0;
}
      </pre>
    </figure>
  </body>
</html>
 

Output

 

An SVG Figure

SVG is ideal for making illustration, which can be used as figures. In this example, we have a mathematics illustration encoded with SVG elements that provides the main content of our figure. Below this, we have a figure reference number with a description. This is typical of the type of figures that one would find in a mathematics text book.

Example5.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    <figure>
      <svg width="600px" height="400px" xmlns="http://www.w3.org/2000/svg">
        <path d="M50,50 C200,100 200,100 300,200 S500,350 550,350" fill="none" stroke="black" stroke-width="1"/>
        <text x="100" y="100" fill="black">y = f(x)</text>
        <line x1="150" y1="50" x2="450" y2="350" stroke="red" stroke-width="1" />
        <text x="290" y="180" fill="red">y = y&#8320 = f&prime;(x&#8320)(x - x&#8320)</text>
        <circle cx="300" cy="200" r="4" fill="black" stroke="none" />
        <text x="250" y="220" fill="black">(x&#8320, y&#8320)</text>
        <rect x="0" y="0" width="600" height="400" fill="none" stroke="gray" stroke-width="1"/>
      </svg><br />
      <figurecaption>Fig. 10.17 - The graph of the equation of the line tangent to the curve at the point (x&#8320, y&#8320)</figurecaption>
    </figure>
  </body>
</html>
 

Output

 

A Figure with Multiple Items

As we noted above, the caption must be either the first or last element in a figure. This becomes particularly important to remember when a figure contains several elements, as it does in this example. Here, we have three images inside the figure. The figurecaption element is placed below them to label them.

Example6.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    <figure>
      <img src="Daisies.png" alt="Daisies">
      <img src="Sunflowers.png" alt="Sunflowers">
      <img src="OrangeFlowers.png" alt="Orange Flowers"><br />
      <figurecaption>Images of various types of flowers</figurecaption>
    </figure>
  </body>
</html>
 

Output

 
 

© 2007–2024 XoaX.net LLC. All rights reserved.