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.

 <img src="" alt="Small picture of a kitten" />
 Small picture of a kitten, graciously shared by <a href=""></a>

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

Web DevMarketing

Getting more out of Plausible

Some things we've done to up our Plausible analytics game

Web Dev

Creating draft posts in Jekyll

How to create and develop with draft posts in Jekyll