Figures - Do you use the right HTML/CSS code to add images and captions?
Rules to Better Websites - Layout And Formatting|8f25811e-0bde-4b94-838b-20a7c62c723c
v9.0
Posted at
9/02/2021 11:58 PM by
Tiago Araujo
Rule Intro
Most developers put the image and the caption in a DIV tag, where the figure is just a paragraph - this is not correct.
Page Content
<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
{F7FC077B-13CC-49E2-A487-06824D5D30AF}
Do you feel this rule needs an update?