In the original post I simplified things slightly. I said that a <dl> element contained pairs (indeed, I implied that they were ordered pairs) of <dt> and <dd> elements. However, that is not required by the DTD. 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 (compare the sentence “All green ideas sleep furiously”—it’s syntactically (grammatically) correct, i.e. it conforms to the “DTD” for English, it just doesn’t mean anything). In particular, these next two examples are perfectly valid but quite meaningless:

A term with no description:

<dl>
  <dt>
    foo
  </dt>
</dl>

A description with no term:

<dl>
  <dd>
    bar
  </dd>
</dl>

The semantics of definition lists is implicit in the ordering of the <dt> and <dd> elements (as opposed, say, to it being made explicit through the use of id and idref attributes, or through nesting the elements). So, this next example also makes no sense:

A description preceding the term it describes:

<dl>
  <dd>
    bar
  </dd>
  <dt>
    foo
  </dt>
</dl>

However, more than one term can be associated with a single description, and more than one description can be associated with a term, in ways which are both valid and meaningful:

<dl class="dictionary">
  <dt>
    bank
  </dt>
  <dd>
    1. Somewhere you deposit your money.
  </dd>
  <dd>
    2. The side of a river.
  </dd>
  <dt>
    geek
  </dt>
  <dt>
    nerd
  </dt>
  <dd>
    Someone who is just misunderstood by the computer
    illiterate imbeciles around them.
  </dd>
</dl>

Definition lists are one of the most underused parts of XHTML, which is a shame as they are a powerful tool. However, their implicit semantics also indicate why XHTML, whilst being far more semantically expressive than most people give it credit for, is also quite semantically weak.

IMG1 IMG2 IMG3 IMG4
CAP1 CAP2 CAP3 CAP4

Can you style a dl to do that?

Sven

What you’d need to do is to place each image and its caption in their own dl element, and float the dls next to each other. So, you’d end up with something like this:

<dl class="img_col">
  <dt>
    <img src="IMG1" />
  </dt>
  <dd>
    CAP1
  </dd>
</dl>
<dl class="img_col">
  <dt>
    <img src="IMG2" />
  </dt>
  <dd>
    CAP2
  </dd>
</dl>
<dl class="img_col">
  <dt>
    <img src="IMG3" />
  </dt>
  <dd>
    CAP3
  </dd>
</dl>
<dl class="img_col">
  <dt>
    <img src="IMG4" />
  </dt>
  <dd>
    CAP4
  </dd>
</dl>

Then you have a style rule that says something like:

dl.img_col
  {
    float: left;
    margin-right: 0.5ex;
  }

It’s not perfect, not at all, but I do think that it preserves more of the semantics than any of the other alternatives.

CAPTION

TOPIC

Like Sven, I guess, I’m thinking about more complex visual layouts with photos. A definition list is structurally a kind of cascade, whereas it’s our natural expectation (carried over from old media) that photos will be displayed in a way that is more grid-like.

So I wonder if you might also consider using tables for this? Would that be semantically correct? In the simplest form, you might use a single cell per row in a two-row table, with the picture in the top cell and the caption in the bottom one. CSS would be used to style the table however you like, and maybe the only choice for me would be to turn off borders.

Figure 1

This is the caption for Figure 1. It can be a long caption, if you like.

Would this also be semantically correct? I know that tables are not meant to be used for layout, but it seems to me that a photo and caption are inherently related “data,” just as you infer by relating the caption as a kind of definition … so the function of the table in this case is relational, with layout being an equal or secondary function.

Figure 1

This is the caption for Figure 1. It can be a long caption, if you like.

[table class=”image”]
[tr][th]Figure 1[/th][/tr]
[tr][td][img src=”figure1.gif” width=”100%” /][/td][/tr]
[tr][td]This is the caption for Figure 1. It can be a long caption, if you like.[/td][/tr]
[/table]

I don’t think a table would be a totally inappropriate way of laying out a series of images and their captions. But I don’t think it ideal. For example your markup determines how many columns there are, and therefore how many images (and captions) appear side-by-side, regardless of width of containing block. That isn’t very fluid. I still think you would be better off using a seperate dl element for each image and its caption, and then in CSS fixing the height and width of the dls and giving them a float property (right or left, doesn’t matter). That way you get a similar effect to the table, but the number of columns expands and contracts to fit the available space.

Struggled much of the day yesterday creating and troubleshooting just such a table (for an intranet, or I’d post the link), and it looked great in Firefox and shattered the layout in IE6. I was able to resolve most of those problems, but I’m back to give your solution a try instead.