[whatwg] <figure><img><* caption>

[Tab Atkins Jr.]

On Mon, Nov 30, 2009 at 12:41 PM, Philip Jägenstedt <philipj at opera.com> wrote:
> As currently speced, the proper usage of <figure> is:
>
> <figure>
>  <dd><img src="bunny.jpg" alt="A Bunny"></dd>
>  <dt>The Cutest Animal</dt>
> </figure>
>
> Apart from all that has been said about legacy parsing, leaking style in IE,
> etc I would (perhaps not be the first to) add:
>
> 1. It seems quite easy to confuse or mistype dd/dt. Without guessing how
> often authors will get it wrong, I think everyone agrees that (all else
> equal) a syntax which is harder to confuse/mistype is better.
>
> 2. Only the caption needs to be marked up, the content is implicitly
> everything else. While some content may need a wrapping element for styling,
> e.g. <img> usually does not.
>
> 3. Aesthetics. (My eyes are bleeding, but I can't speak for anyone else's.)
>
> The main difficulty with coming up with something better seems to have been
> finding a name for an element which isn't already taken. If that's the only
> issue, why not just take some inspiration from <time pubdate> and use an
> attribute instead?
>
> <figure>
>  <img src="bunny.jpg" alt="A Bunny">
>  <p caption>The Cutest Animal</p>
> </figure>
>
> At least to me, it looks clean enough and there are no serious parsing
> issues (just use document.createElement("figure") for IE).
>
> The caption is easy to style with "figure *[caption]" or any number of easy
> workarounds for browsers that don't support CSS attribute selectors (IE6?).
>
> I haven't been following the discussions on <figure> closely, so if this has
> already been discussed and rejected please link me in the right direction.

I've proposed and supported this approach for a long time.  It's never
been rejected, but rather more-or-less ignored.  I agree that it
solves the issues nicely, and has an appropriate level of support in
IE7+.  (IE6 is still doing its gradual decline, and I've been allowed
to ignore it since IE8 came out.)

The only thing you have to answer is what to do if there are multiple
@caption elements in the <figure>.  I suggest taking either the first
or last; the exact choice is pretty much arbitrary.

Note: I would style it with "figure > [caption]" instead, to ensure
you don't accidentally grab misplaced captions.

~TJ