Figures - Do you use the right HTML/CSS code to add images and captions?
  v3.0 Posted at 30/11/2017 6:29 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 caption. This structure gives  semantic meaning to the image and figure.​

<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:


    Note: Social Media login for Yotpo is not working in IE or Safari, please use Chrome. We are waiting for Yotpo to fix it.