Michel Fortin wrote:
<figure>
<caption>Figure 1: Some image</caption>
<img src="...">
</figure>
I agree that structure is the best approach. That allows for good
styling, by setting the following:
figure { display: table; caption-side: bottom; }
figure img { display: block; }
caption { display: table-caption; }
The only problem is that it isn't very backwards compatible. Firefox
doesn't include <caption> in the DOM outside of a table. Moving the
caption after the image in the source and setting display: block; on the
image gives reasonable results in Firefox and Opera because the img is a
child of figure, but not in IE because figure and img are treated as
siblings.
Using the microformat approach instead, like the following, gives better
backwards compatibility, but at the expense of proper semantic elements.
<div class="figure">
<img ... >
<p class="caption">Figure 1: Some image</p>
</div>
We could also use a single-cell table for this, but this approach could
be considered abuse and IE doesn't seem to support 'caption-side', but
does support the deprecated align attribute on caption.
<table class="figure">
<caption>Figure 1: Some image</caption>
<tr>
<td><img ... ></td>
</tr>
</table>
Whatever approach we eventually decide upon, it should be able to handle
captions for a variety of strucutres, not just images. This includes:
* Blocks of code and sample input/output
* Lists
* <object>, <embed>, <img> and maybe <iframe>
Along with tables (which already support them) I think that would cover
every use case for captions.
--
Lachlan Hunt
http://lachy.id.au/
