First things first, many thanks to all of the readers of SimpleBits for making 2003 a great year. It's been fun chatting about standards-compliant design, the subtlties of minute markup comparisons and... beer. I'm already looking forward to continue with bigger, better things in 2004.

Figure 1

Mike Papageorge had written in a while back with a SimpleQuiz suggestion concerning the floating of an image and caption within content. I thought it may be an interesting bit of markup to discuss, so I've whipped up the following question.

But first, take a look at Figure 1. Ha! By floating Figure 1, I'm demonstrating precisely the situation that this question refers to: An image floated to one side, with a descriptive caption underneath. Content text will wrap around the entire package.

Now, on to the question. While I've illustrated only three methods, there are surely many more combinations that could achieve simliar results. Try to take into account how an unstyled view of the different methods would appear as well.

Q: Which method makes the most sense when floating an image and caption within a body of text?

1. <p class="floatimg">
  <img src="image.jpg" alt="good alt text here" /><br />
  Description goes here
</p>
2. <div class="floatimg">
  <p><img src="image.jpg" alt="good alt text here" /></p>
  <p>Description goes here</p>
</div>
3. <dl class="floatimg">
  <dt><img src="image.jpg" alt="good alt text here" /></dt>
  <dd>Description goes here</dd>
</dl>