Figures - Do you use the right HTML/CSS code to add images and captions?
Updated by Tiago Araújo [SSW] 3 years ago. See history
123
<introEmbed
body={<>
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: 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"></img src="image.jpg" alt="image"><figcaption>Figure: Caption</figcaption></figure>
✅ 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="badImage">OR<dl class="goodImage"><dt><img src="image.jpg" alt="Image" /></dt><dd>Figure: Caption</dd></dl></dl>
Figure: Old way example
Note: <dl> stands for "definition list"; <dt> for "definition term"; and <dd> for "definition description".
Acknowledgements
Related rules
Need help?
SSW Consulting has over 30 years of experience developing awesome software solutions.