Captioned Images In XHTML

While there are many possible different methods for captioning an image, the solution I prefer in XHTML is to place the image in a definition list. This makes the most sense semantically – the image is the item we are defining, while the definition term is the caption – and is the most flexible in terms of markup. Note that the approach in HTML5 is very different, the latter language having markup explicitly designed for the purpose of captioning images.

A typical XHTML code example would be:

1. <dl id=”captioned-image”>
2. <dt><img src=”khufu-pyramid.jpg” alt=”Great Pyramid of Giza”
3. title=”Great Pyramid of Giza” style=”width:492px; height: 345px;” /></dt>
4. <dd>The Great Pyramid of Giza, completed ~ 2560 BCE</dd>
5. </dl>

While this accomplishes our goal of a captioned image, it doesn’t look terribly good. First, let’s put a border on the definition list:

1. dl#captioned-image { border: 1px solid black; }

Note that this border makes it clear that our definition list takes up the entire horizontal space of our web page, which makes sense, as <dl> is a block tag. The height of the <dl> is determined by the content inside the list. Now let’s float it:

1. dl#captioned-image { border: 1px solid black; float: right; }

Note that when we float a block element it essentially collapses: now the width of our definition list is determined by the widest element it contains (the image).

We’ll add a little padding, margin-left and background-color; you could also remove the border at this stage:

1. dl#captioned-image { border: 1px solid black; float: right; padding: 1em;
2. margin-left: 1em; background-color: #ffc; }

The <dt> content is indented because that is the default for that element, just as it is for <li> elements, so let’s remove that with a separate style declaration:

1. dl#captioned-image dd { padding-left: 0; }

At the same time, we’ll improve a few things about the caption:

1. dl#captioned-image dd { padding-left: 0; text-align: centre; font-style: italic; }

Now the captioned image can have content wrapped around it. However, unlike an image by itself, it cannot be placed inside a paragraph:

1. <dl id=”captioned-image”>
2. <dt><img src=”khufu-pyramid.jpg” alt=”Great Pyramid of Giza”
3. title=”Great Pyramid of Giza” style=”width:492px; height: 345px;” />
4. </dt>
5. <dd>The Great Pyramid of Giza, completed ~ 2560 BCE</dd>
6. </dl>
7. <p>Common knowledge (and Cecil B deMille films) imagines rows of
8. sweating, beaten slaves building the pyramids. >Archeologically, there
9. is no evidence for this; indeed, all the available evidence shows that
10. the workers were local men, hired to work off taxes owed to the Pharaoh
11. by completing labour during the Egyptian wet season, when the Nile was
12. flooded and no farming could take place.</p>
13. <p>In addition, the gangs of workers were significantly smaller
14. than those shown in cinematic recreations: it has been estimated that
15. it would take only 2,000 men working full-time to erect the Great Pyramid
16. in the 10 years stated for its construction. Even taking into account
17. support staff and rotation of workers, the entire workforce was probably
18. no more than 10,000 people at any one time, lower by an order of magnitude
19. than the 100,000 slaves Herodotus reported in his
20. <cite>Histories</cite>.</p>

While we have used this list to contain a single example, you could have multiple pairs of images and captions as definition terms and matching declarations in the same list.