Image captions the semantic way

Last week I was in a meeting with a current client who put together a nice little presentation on webstandards and accessibility. Their corporate standards are very progressive and they don't let anything slide. This is a very grateful situation, as I've found it pretty rare that a client is savvy enough to say "We need all of your deliverables to be W3C compliant, accessible and semantic".

Going through their IA documents (which are estensibly just wireframes) I was still left with a few important questions. This site has alot of articles as it's the web-based version of a print publication, and many articles have images inline with the text content, just like a magazine. And one of my questions was, "How can I wite xhtml for images with captions in a semantic and meaningful way?". Part of understanding the most appropriate approach to this problem is understanding what a caption is and how it relates to an img.

What is a caption?

I decided to go to one of my favorite places and look it up.

cap–tion [kap–shuhn]
-noun

1. a title or explanation for a picture or illustration, esp. in a magazine.
2. a heading or title, as of a chapter, article, or page.

Interesting eh? So it looks like a caption is two things, and technically heading tags (ie. <h1>, <h2>, <h3>, <h4>, etc…) are all considered captions. So how does a caption relate to an image?

A caption is the definition of an image

Since we use <caption> (and alt attributes) to describe what is represented visually in an image, we can surmise that a definition list (<dl>) is going to be the most appropriate solution to this issue. By using definition lists we can define the relation ship between the image is the definition's title (<dt>) and the text is the definition's definition (<dd>)

This is my new 1978 Honda CB750 F2 cafe racer.

So as you can see, providing image captions this way allows you to group and associate the content together without requiring a wrapper <div> for positioning or referencing. and if there isn't a caption available, the image can still sit within the <dl> and <dt> tags for a logical inclusion of a caption at a later time.

It turns out that Darren Brierton write this article back in Feb of '05 about this very same topic. He goes to mention in a comment to his own post that definition list's aren't limited to one <dt> element followed by one <dd> element.

The semantics of definition lists is implicit rather than explicit. A <dl> element can contain any old mish-mash of <dt> and <dd> elements and still be valid. It might not, however, make any sense