Image Caption

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. The fact that image captions should be treated differently to body text (they are not in the main flow of the document) suggests this element could be important for figure handling by assistive tools allowing e.g. aural browsers to skip captions except on explicit user request.

Current Methods and Workarounds

See Image Caption Usage for a couple of sample cases.

Proposed Solutions

<figure> with <caption>

A <figure> element contains illustrative content for the current section. It can contain a <caption> element, either as the first or the last child, that will be used to describe or give a caption to the content of the figure.

<figure>
  <caption>Caption Text</caption>
  <img src="...">
</figure>

Processing Model

The processing model for HTML files must be changed so that the <caption> is no longer ignored when outside the context of a table. It could also be a good idea to add a new figure insertion mode that would prevent figure captions from being moved to the enclosing table when inside a table cell, otherwise <figure> will break in table-based layouts.

<table>
<tr><td>
  <figure>
    <caption>Caption Text</caption>
    <img src="...">
  </figure>
</td></tr>
</table>

Limitations

<caption> being ignored by current browsers when outside a table makes it impossible to style, and it'll also be terribly broken with table layouts when figure captions end up at the top (or the bottom) of the enclosing table.

Implementation

Parsing changes in this section could be hard to implement is the <caption> element's legacy within <table>. So it is uncertain

Putting aside the parsing problem, there's not much else to implement for visual browsers. A good display model that could be used to display figures is already available in CSS 2.1:

figure { display: table; }
caption { display: table-caption; }

This would display the figure as a one-cell table, and the caption either at the top or at the bottom (depending on the caption-side property). The interesting part of this model is that the caption's width is constrained by the width of the figure, making it the ideal choice for floated figures.

Adoption

The syntax is pretty straightforward to use. "figure" and "caption" are commonly used terms to designate exactly this feature in the print world. It should be a natural choice to authors that wonder how to markup their images.

This markup won't work however if an author wants the caption to be elsewhere in the document. (In this proposal, <caption> is pinned to the figure's content.) It does not seem a common use case however.

<figure> with <legend>

A <figure> element contains illustrative content for the current section. It can contain a <legend> element, either as the first or the last child, that will be used to describe or give a caption to the content of the figure.

<figure>
  <legend>Caption Text</legend>
  <img src="...">
</figure>

Processing Model

To be completed

Limitations

To be completed

Implementation

A good display model that could be used to display figures is already available in CSS 2.1, the table model. A default stylesheet could look like this:

figure { display: table; }
figure legend { display: table-caption; }

This would display the figure as a one-cell table, and the figure legend either at the top or at the bottom (depending on the caption-side property). The interesting part of this model is that the legend's width is constrained by the width of the figure, making it the ideal choice for floated figures.

Adoption

"figure" and "legend" are commonly used terms in the print world, so their use could prove natural to authors. It is most likely that authors that need a markup for their figure will chose this one if it is sanctioned in a standard.

This markup won't work if an author wants the caption to be elsewhere in the document. (In this proposal, <legend> is pinned to the figure's content.) It does not seem a common use case however.