Rules

Secret ingredients to quality software

Edit
Info

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

Last updated by Tiago Araújo [SSW] on 28 Apr 2021 03:57 pm (9 days 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.

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

Figure: Bad Example

Instead, you should use <figure> and <figcaption> as per https://www.w3schools.com/TAGS/tag_figcaption.asp. This structure gives semantic meaning to the image and figure:

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

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.

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

Figure: Old Example

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

Tiago AraujoTiago Araujo
Adam CoganAdam Cogan

We open source. This page is on GitHub