Figures - Do you use the right HTML/CSS code to add images and captions?

Last updated by Tiago Araújo [SSW] about 2 years ago.See history

Most developers put the image and the caption in a DIV tag, where the figure is just a paragraph - this is not correct.

    <img alt="" />  
  <p>Figure: Caption</p>

Figure: Bad example

Instead, you should use <figure> and <figcaption> as per This structure gives semantic meaning to the image and figure:

  <img src="image.jpg" alt="image"></img src="image.jpg" alt="image">
  <figcaption>Figure: Caption</figcaption>

Figure: Good example

The old way

For some internal sites, we still use the old way to place images: Using  <dl><dt> (which is the item in the list – in our case an image), and <dd> for a caption.

<dl class="badImage">
  <dl class="goodImage">
    <dt><img src="image.jpg" alt="Image" /></dt>
    <dd>Figure: Caption</dd>

Figure: Old way example

Note: <dl> stands for "definition list"; <dt> for "definition term"; and <dd> for "definition description".

We open source. Powered by GitHub