Home
Figures - Do you use the right HTML/CSS code to add images and captions?
  v9.0 Posted at 9/02/2021 11:58 PM by Tiago Araujo

​​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" />
  <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.

<dl class="image"> 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".

​Relate Rule

Related rules

    Do you feel this rule needs an update?

    If you want to be notified when this rule is updated, please enter your email address:

    Comments: