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:

<dl id="captioned-image">

<dt><img src="khufu-pyramid.jpg" alt="Great Pyramid of Giza" /></dt>

<dd>The Great Pyramid of Giza, completed ~ 2560 BCE</dd>

</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:

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:

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:

<p>Common knowledge (and Cecil B deMille films) imagines rows of sweating, beaten slaves building the pyramids. Archeologically, there is no evidence for this; indeed, all the available evidence shows that the workers were local men, hired to work off taxes owed to the Pharaoh by completing labour during the Egyptian wet season, when the Nile was flooded and no farming could take place.</p>

<p>In addition, the gangs of workers were significantly smaller than those shown in cinematic recreations: it has been estimated that it would take only 2,000 men working full-time to erect the Great Pyramid in the 10 years stated for its construction. Even taking into account support staff and rotation of workers, the entire workforce was probably no more than 10,000 people at any one time, lower by an order of magnitude than the 100,000 slaves Herodotus reported in his <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.

Image Captioning In HTML5

Under HTML5, this approach changes significantly: HTML5 has specialized elements (<figure> and <figcaption>), which are explained in a separate entry.