Back to article.

Use of nested figures

Examples of recommended methods for marking up groups of images which have associated captions:

An example of how not to mark up groups of images which have associated captions is provided in Example 3


Example 1. Code using nested figure elements:

Notes

<figure role="group">
<figcaption>The castle through the ages: 1423, 1756, and 1966 respectively.</figcaption>

<figure role="group">
<img src="castle-etching.jpg" alt="The castle has one tower, and a tall wall around it.">
<figcaption>Charcoal on wood. Anonymous, circa 1423.</figcaption>
</figure>

<figure role="group">
<img src="castle-painting.jpg" alt="The castle now has two towers and two walls.">
<figcaption>Oil-based paint on canvas. Eloisa Faulkner, 1756.</figcaption>
</figure>

<figure role="group">
<img src="castle-fluro.jpg" alt="The castle lies in ruins, the original tower all that remains in one piece.">
<figcaption>Film photograph. <span lang="fr">Séraphin Médéric Mieusement</span>, 1936.</figcaption>
</figure>
</figure>

Example 1. Display using nested figure elements:

Notes

The castle through the ages: 1423, 1756, and 1966 respectively.
The castle has one tower, and a tall wall around it.
Charcoal on wood. Anonymous, circa 1423.
The castle now has two towers and two walls.
Oil-based paint on canvas. Eloisa Faulkner, 1756.
The castle lies in ruins, the original tower all that remains in one piece.
Film photograph. Séraphin Médéric Mieusement, 1936.

Example 2: Using nested figure elements and CSS to show/hide caption information.

Notes:

It may be a requirement for visual design that the caption text is not always visible. This can be achieved through the use of some additional markup and CSS to hide/show the caption text on hover or focus.

The castle through the ages: 1423, 1756, and 1966 respectively.
The castle has one tower, and a tall wall around it.
caption Charcoal on wood. Anonymous, circa 1423.
The castle now has two towers and two walls.
caption Oil-based paint on canvas. Eloisa Faulkner, 1756.
The castle lies in ruins, the original tower all that remains in one piece.
caption Film photograph. Séraphin Médéric Mieusement, 1936.

Example 3. Example showing the wrong way to caption images:

Notes:

<!-- THIS IS BAD CODE DO NOT USE IT -->


<figure>
<img src="castle1423.jpeg" title="Charcoal on wood. Anonymous, circa 1423."
alt="The castle has one tower, and a tall wall around it.">
<img src="castle1858.jpeg" title="Oil-based paint on canvas. Eloisa Faulkner, 1756."
alt="The castle now has two towers and two walls.">
<img src="castle1999.jpeg" title="Film photograph. Séraphin Médéric Mieusement, 1936."
alt="The castle lies in ruins, the original tower all that remains in one piece.">
<figcaption>The castle through the ages: 1423, 1756, and 1936 respectively.</figcaption>
</figure>

Example 3. Display of a figure containing multiple images with captions text in the img title attribute:

Notes:

 

The castle has one tower, and a tall wall around it. The castle now has two towers and two walls. The castle lies in ruins, the original tower all that remains in one piece.
The castle through the ages: 1423, 1756, and 1936 respectively.