Figures - Do you use the right HTML/CSS code to add images and captions?
  v5.0 Posted at 22/01/2019 10:24 AM by Tiago Araujo

​​Most developers put the image and the caption in a DIV tag. The figure is just a paragraph.​

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

Instead, you should use <DL>, <DT> (which is the item in the list – in our case an image) and <DD>for a caption. This structure gives semantic meaning to the image and figure.

<dl class="image"> OR <dl class="badImage"> OR <dl class="goodImage">
<dt><img alt=""/></dt>
<dd>Figure: Caption</dd>
Figure: Good Example

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

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: