thoughts

[HTML] image descriptions: dl or label?

2004-12-02 modified: 2005-05-21

In addition to: [HTML] usefull element constructions:

Sometimes when you want to add a description to an image, you find out you do not have the proper elements to do this, for example (trivial atributes omitted):

<img>
  <caption>image description</caption>
</img>

is no valid HTML. And this:

<p>
  <img>
  image description
</p>

is semantically a mess (the above is not quite a paragraph do you think?). A way to solve this is to wrap it in a dl:

<dl>
  <dt><img></dl>
  <dd>image description</dd>
</dl>

This will bind the description more semantically to the image. You might want to specify a class for it to, because you use it for different purposes than you normally would. Furthermore, you could use this class to hook up a style.

It just occurred to me that there's another way to do this:

<label>
  <img>
  image description
</label>

Which is not preferred, but you can also make a reference like this:

<label for="imgID">image description</label>
<img id="imgID">

Frankly, I do like the last method. This is all ok by specification, a label element may contain inline content, which on its turn may contain special content. And img is special content.

The only thing I encountered is that label specification talks about it's use on (form) controls, while img is not a control.

<img src="foo.gif" title="the logical structure of foo" alt="[something suitable here]">

img[title] {
	display: block;
	counter-increment: figure;
}
img[title]:after {
	content: 'figure ', counter(figure), ': ', attr(title);
	display: block;
}