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

[Philip Jägenstedt]

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.

-- 
Philip Jägenstedt
Core Developer
Opera Software