Home
Figures - Do you use the right HTML/CSS code to add images and captions?
  v4.0 Posted at 24/04/2018 9:18 AM by Tiago Araujo

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

<div>
<img alt=""/>
<p>Figure: Caption</p>
</div>
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>
<dt><img alt=""/></dt>
<dd>Figure: Caption</dd>
</dl>
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:

    Comments:

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