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.

A typical code example would be:

<dl id="captioned-image">
	<dt><img src="khufu-pyramid.jpg" alt="Great Pyramid of Giza">
	<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;
}

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

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

Note that an element is floated it essentially collapses: the width of the definition list is now determined by the widest element it contains (i.e. the image).

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

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

The <dt> content is indented by default, just as it is for <li> elements. Let’s remove that with a separate style declaration:

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

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

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

Now the captioned image can have content wrapped around it:

<dl id="captioned-image">
	<dt><img src="khufu-pyramid.jpg" alt="Great Pyramid of Giza" style="max-width: 100%; height: auto;" />
	<dd>The Great Pyramid of Giza, completed ~ 2560 BCE
</dl>
<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>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 this list contains a single example, it's entirely possible to have multiple pairs of images and captions as definition terms and matching declarations in the same list.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.