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

Mac Productivity

What I use SetApp for

A rundown of the applications I use SetApp for, and why I'm happy to continue using it


Changing colours in Rails Admin

How to change up the colours in Rails Admin