The correct way to markup an image and caption in HTML

I my recent post about quick semantic wins I mentioned that captioning an image should be done with <figure> and <figcaption>

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 <figcaption> element.

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 <cite>.

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?