The correct way to markup an image and caption in HTML
How to use figure and figcaption for semantic HTML gains
I my recent post about quick semantic wins I mentioned that captioning an image should be done with
I wanted to explain it in a bit more detail with a quick example.
<figure> <img src="http://placekitten.com/200/300" alt="Small picture of a kitten" /> <figcaption> Small picture of a kitten, graciously shared by <a href="http://placekitten.com">placekitten.com</a> </figcaption> </figure>
Here is a gist of it, if you like that sort of thing!
So what we have is a
<figure> element which holds both an
<img> and a
The implied meaning here is that the contents of
<figcaption> caption the rest of the contents of
<figure> which in this case is an
<img>, but it could have been a video file or tabular information – anything that constitutes something that could be captioned really.
The other thing you may notice is that I have included a link inside
<figcaption>, this is because
<figcaption> is a block level element and can have elements inside itself. As well as links a common thing you might find would be
I was happy to note that WordPress gets this right out of the box. I have seen other CMS incorrectly use spans and divs to accomplish this but WordPress leads the way when it comes to marking up captioned images correctly!
Why should I care?
You might rightly wonder why you would care about correctly captioning images. There are several reasons.
- Not all images make sense by themselves – You can’t assume everyone is going to understand your image, adding a caption provides much needed context.
- More content for you – If you supplement your images with correct captions you are adding extra contextual information for your users but likewise you are adding more content for search engines to find.
- Captions can be translated by software, images can’t – Which immediately opens up your images to being understood by an international audience.
- It is professional – You expect journals, books and magazines to correctly caption their images, why shouldn’t people expect it from your website?