Do not caption images that are purely decorative.
You can caption and credit your images on your webpage using one of the new tags introduced in HTML5, the <figcaption>
tag which accompanies the <figure>
tag. The tag <figure>
tag specifies self-contained content, like illustrations, diagrams, photos, code listings, etc. The <figcaption>
tag defines a caption for a <figure>
element.
HTML
<figure> <img src="https://photos.app.goo.gl/xtMNJyTpuVgw3zHHA"/> <figcaption>Fig.1 - Bull, Wild Coast, South Africa (photo credit: <a href="http://www.cape-hike.co.za/" target="_blank">Cape-hike.co.za</a>).</figcaption> </figure>
The above code results in something like the following (my WordPress theme may have added some styling):
CSS
The Codepen below contains similar code with the addition of CSS styling to add some eye-candy:
See the Pen HTML5 image caption by David Fox (@foxbeefly) on CodePen.
While we are talking captions, did you know that you can add captions to your HTML tables as well?