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 <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?

Recent posts View all

Freelancing

Why we have ads

We run ads on the site, this article talks about how we try and make them not terrible and why we monetise in the first place

Accessibility

Writing accessible hashtags

Write accessible hashtags by camel casing them. Because ThisReadsBetter thanthisdoes.