Figure and figcaption

Designing with figure and figcaption

The HTML <figure> element can contain a variety of content, including images, illustrations, diagrams, tables and charts. It can also contain videos, quotes, poems and code snippets. It can be accompanied by an optional <figcaption> element.

The <figcaption> element represents a visible caption for the figure. It is optional and not required to be in every <figure> element.

While both the alt attribute and the <figcaption> element provide a way to describe images, their purposes are different:

  • The alt text conveys the meaning or essential content of the image in a short phrase.
  • The <figcaption> provides context to describe information that isn't apparent from looking at the image. This includes the who, what, when, where, and/or why of an image.

Best practices around the use of alt text and <figcaption>:

  • Do not use the exact same words for both alt text and <figcaption>. Screen readers will read the information twice.
  • Always provide alt text for images even if they have a <figcaption>. Providing an empty or null alt attribute (alt="") will prevent a screen reader from announcing that an image is present.

Good example: Figure and figcaption

Trullo houses (dry stone huts) with conical roof
Row of trullo houses (dry stone huts) on Monte Pertica street in Alberobello, Bari Province, Italy

HTML

<figure>
   <img clas="img-responsive" alt="Trullo houses (dry stone huts) with conical roof" src="images/image4.jpg"/>
   <figcaption>Row of trullo houses (dry stone huts) on Monte Pertica street in Alberobello, Bari Province, Italy</figcaption>
</figure>
Back to top