A user account is required in order to edit this wiki, but we've had to disable public user registrations due to spam.

To request an account, ask an autoconfirmed user on Chat (such as one of these permanent autoconfirmed members).

Image Caption

From WHATWG Wiki
Revision as of 14:47, 16 November 2006 by Michel Fortin (talk | contribs) (Begun explaining the problematic, this isn't very complement at the moment.)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to navigation Jump to search

Image caption are often found on the web, but there is no standard markup for this.

Problem Description

Currently, most people use either a table, custom class names, or simply put the image inside a paragraph, each option either conveying a wrong meaning or being ambiguous with the rest of the content.

An interesting analysis has been done on the subject by Dan Cederholm in one of his SimpleQuiz. His conclusion:

So in this case, I might choose option A -- because visually it shows the relationship between the items better than the others. But I suppose this is bad semantics. Or maybe just another case where we don't have the 'perfect' set of defined elements for this (very) specific job.

And his option A was:

<p><img scr="..."><br />
   Caption Text</p>

In other word, he could not figure out anything good using current elements available in HTML, and, as most people do, had to create his own solution.

Setting a standard for such things -- an explicit association between the caption and the illustration -- would help image search engines, it could enable the automatic creation of a figure index for a page and the creation of assistive tools capable of handling illustrations better.

Proposed Solutions

<figure> with <caption>

Brief description of the solution and of how it address the problem at hand.
<figure>
  <caption>Caption Text</caption>
  <img src="...">
</figure>

Details

Explanation of the changes introduced by this solution. It explains how the document is processed, and how errors are handled. This should be very clear, including things such as event timing if the solution involves events, how to create graphs representing the data in the case of semantic proposals, etc.
<table>
<tr><td>
  <figure>
    <caption>Caption Text</caption>
    <img src="...">
  </figure>
</td></tr>
</table>

Limitations

Cases not covered by this solution in relation to the problem description; other problems with this solution, if any.

Implementation

Description of how and why browser vendors would take advantage of this feature.

Adoption

Reasons why page authors would use this solution.

Usage

Some evidence is there that this feature is desparately needed on the web.