Jump to main content

Figure

The purpose of an HTML figure is for grouping a single image and corresponding caption content together, as one unit. So rather than having a paragraph or sentence of text going adrift underneath an image, the figure tag helps semantically to keep things better organised, within the page structure. This can bring positive benefits for accessibility and SEO. The figure snippet here combines an image element with a short text element. Therefore all the content inside the figure is editable. Figures are good to use for charts and illustrations.

Example

SST chart
Sea surface temperature (SST) is the temperature of the top millimetre of the ocean's surface. An anomaly is a departure from average conditions. These charts compare temperatures in a given month to the long-term average temperature of that month from 1985 through to 1997. Blue/purple shows temperatures that were cooler than average, grey shows near-average temperatures, and yellow/red shows where temperatures were warmer than average. The above chart shows an active La Niña pattern, during which the sea surface temperature across the eastern equatorial part of the central Pacific Ocean is lower than normal by 1–3 °C.

HTML & PHP 

<figure>
  <?php webyep_image("Figure Image", false, '', '', '', 0, 0, false, 70, 90, 600, 270); ?>
  <figcaption>
    <?php webyep_longText("Figure Caption", false, 550, 240); ?>
  </figcaption>
</figure>

CSS

figure {
    border: 1px solid #ccc;
    padding: 0.5rem;
}

Javascript