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

Nikita Popov privat at ni-po.com
Mon Nov 30 11:06:17 PST 2009


Yeah, I think this dd, dt thing isn't really intuitive. (Looks like 
these two elements from definition lists are now used everywhere.)

Your proposed syntax looks more nice. But still, why do we need the 
figure-wrapper? It would be cleaner syntax, in my eyes, if you could 
easily specify an element that is related as a caption to another 
element. Could look like this:
<img src="bunny.jpg" alt="A Bunny" id="bunny">
<p caption="bunny">The Cutest Animal</p>
or
<img src="bunny.jpg" alt="A Bunny" id="bunny">
<p for="bunny">The Cutest Animal</p>

Or used in the code-context:
<code id="mygreatscript">echo 0;</code>
<strong for="mygreatscript>Does nothing, but it's still cool!</strong>

I know, I know, "for" is used for labelled form elements, but I think, 
that is expresses very well the relation between content and caption. 
Furthermore, any related content could be marked up this way. For 
example, there is this strange hgoup-tag, that's used fore grouping 
title and subtitle:
<hgroup>
    <h1>Somethind great happened</h1>
    <h2>Now some subtitle in a newspaper article...</h2>
</hgroup>
If I wanted to place an image between title and subtitle of the article, 
it would look something like this:
<hgroup>
    <h1>Somethind great happened</h1>
    <figure>
        <dd><img src="Aphotoofit" /></dd>
        <dt>Descr. of img.</dt>
    </figure>
    <h2>Now some subtitle in a newspaper article...</h2>
</hgroup>
The img doesn't really belong in the hgroup. Using the for-attr it would 
look like this:
<h1 id="something-great-happened">Something great happened</h1>
<img src="Aphotoofit" id="theimg" />
<p for="theimg">Descr. of img.</p>
<h2 for="something-great-happened">Now some subtitle in a newspaper 
article...</h2>
Here styling is the problem: The fors are all identical and can't be 
distinguished. So maybe get the caption-attr. back in?
<h1 id="something-great-happened">Something great happened</h1>
<img src="Aphotoofit" id="theimg" />
<p caption for="theimg">Descr. of img.</p>
<h2 subtitle for="something-great-happened">Now some subtitle in a 
newspaper article...</h2>
Which would be not so nice looking in XML ('caption="caption"').
So maybe combine them (which would, too, solve the problem of usage of 
"for" for forms. [Nice three fors...]]):
<h1 id="something-great-happened">Something great happened</h1>
<img src="Aphotoofit" id="theimg" />
<p caption-for="theimg">Descr. of img.</p>
<h2 subtitle-for="something-great-happened">Now some subtitle in a 
newspaper article...</h2>

Philip Jägenstedt schrieb:
> 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.
>




More information about the whatwg mailing list