Images with <figure> tag

The <figure> element is a powerful tool for displaying images, but often not used since there is already an <img> tag, so, why bother? Well, if there's another tag maybe could be interesting (and useful) to know its characteristics and use cases. And believe me, there are interesting applications.

What is the tag for?

The <figure> tag is used to encapsulate standalone content related to a specific image or diagram, mainly an image and its relative caption, like one of these "boxes" in books with a picture on top and its caption below (never forget the typographic nature of HTML elements!). While the content within the <figure> element is related to the main text, it's positioned independently. Therefore, removing it won't affect the document's flow or disrupt the primary text.

Use the Right Markup

The first step in creating an accessible <figure> element is to use the right markup. Here is the basic structure:

<figure>
  <img src="image_file.jpg" alt="Alt text">
  <figcaption>Fig.n caption.</figcaption>
</figure>

All attributes and best practices of <img> element applies, obviously, also to the <img> contained in your <figure>.

Clear and appropriate descriptions

Clear descriptions are essential: here are some best practices to follow:

• Use the alt attribute in the image.

• an accessible name is required: if your <figcaption> is short and concise you could use its id for <figure>'s aria-labelledby, otherwise it's better for its aria-describedby;

• if no visible caption is visible you should at least use aria-label, but at this point you should consider carefully if <figure> is really the most appropriate element to use;

• aria-describedby - This attribute can be used to provide additional information about the <figure> element, such as a caption or context.

• aria-details - This attribute can be used to provide additional information about the <figure> element, such as a caption or context.

Possible use cases

Everytime you need an image with a description, probably <figure> is what you need. You can use as in books to manage your image and description, both visible, as a single entity with a more semantically appropriate element. I use it a lot when creating these cool looking portfolio-style galleries, that display a description of your works when hovering. Or think about an image of wich you want to display the title, or credits.