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

Fig.1 – Bull, Wild Coast, South Africa (photo credit: Cape-hike.co.za).

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?

By MisterFoxOnline

Mister Fox AKA @MisterFoxOnline is an ICT, IT and CAT Teacher. He has a passion for technology and loves to find solutions to problems using the skills he has learned in the course of his IT career.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Discover more from stylus

Subscribe now to keep reading and get access to the full archive.

Continue reading