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 nullalt
attribute (alt=""
) will prevent a screen reader from announcing that an image is present.
Good example: Figure and figcaption
Example begins
Example ends
HTML
Code begins
<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>
Code ends