The figure and figcaption tags for illustrations and captions

Each thumbnail in our selfie gallery links to a separate photo page containing a full-size image and a caption. The photo and its caption form a self-contained unit that we could reuse elsewhere in the blog. How should we mark up that unit?

The <figure> tag is suited to this kind of self-contained content. It can group an illustration with an optional caption as one unit. The content could be an image, graph, code example or table that is referred to from the surrounding text.

A figure can have a caption that explains its content. Use <figcaption> to mark up that caption, placing it as the first or last element inside <figure>. For example:

<figure>
  Graph, image, diagram or code
  <figcaption>Caption for the content</figcaption>
</figure>

Let’s mark up the photo in our gallery using <figure>.

Browsers add margins to figure by default, so we added styles for figure and figcaption. You can view them in the style.css tab.