[whatwg] image captions

[Michel Fortin]

Le 27 juin 2006 à 6:00, dolphinling a écrit :

> What's wrong with
>
> <div>
>   <img src="">
>   <p>This is the caption.</p>
> </div>
>
> ? That's how I think of it semantically, and I don't see it as  
> being common enough to warrant a separate element of its own.

The problem is that this means nothing. The paragraph could be the  
caption as much as it could be an the excerpt of an article with a  
small category logo at the top, or it could be an image inserted for  
presentational purpose or something else. There is no way to  
disambiguate any of this with your markup. The fact that they are  
together does not mean that it is a caption, it somewhat convey that  
the two are related, but in what way?

I think something like:

     <aside>
        <img src="...">
        <p>This is the caption.</p>
     </aside>

would already be more appropriate than what you suggested as it  
removes the paragraph from the main flow of the document and thus  
implicitly link it with the image.

But I think illustrative figures sould be disambiguated a little  
more, as they are not always appropriate as asides[1] in the sense of  
"tangentially related to the content around", they are usually tied  
to the content, they're not really "separate from that content".

  [1]: http://www.whatwg.org/specs/web-apps/current-work/#the-aside

  - - -

This construct is common enough if you follow news sites. Here is my  
morning harvest of a couple of use cases in the news:

<http://www.cnn.com/2006/WORLD/meast/06/27/iran.us.reut/index.html>
<http://news.bbc.co.uk/2/hi/middle_east/5119732.stm>
<http://politics.guardian.co.uk/homeaffairs/story/0,,1806799,00.html>
<http://radio-canada.ca/nouvelles/regional/modele.asp?page=/regions/ 
Montreal/2006/06/26/006-crise-logement-iris.shtml>
<http://www.cbc.ca/story/world/national/2006/06/27/saddam-new- 
trail.html>
<http://www.salon.com/ent/feature/2006/06/27/911_conspiracies/ 
index_np.html>
<http://www.macworld.com/2006/06/firstlooks/flciviv/index.php>


Such image captions are also widely used in many publications in the  
scientific and technical fields to denote figures (hence the <figure>  
element I proposed on May 3):

<http://www.stanford.edu/group/hopes/basics/basichd/a1.html>
<http://www.ess.gov.si/eng/AnnaulReport/lp98/2_4.htm>
<http://www.centrelink.gov.au/internet/internet.nsf/ar0001/ 
chp4.2.htm#figure9>
<http://www.ai-junkie.com/ann/som/som1.html>
<http://japanfocus.org/article.asp?id=413>
<http://medicine.plosjournals.org/perlserv?request=get- 
document&doi=10.1371/journal.pmed.0020228>


There is a lot of figures in computer technology articles too:

<http://www.onlamp.com/pub/a/onlamp/2005/01/20/rails.html>
<http://www.symbian.com/developer/techlib/v9.1docs/doc_source/N10356/ 
BuildTools/native/abiv1v2migration.html>
<http://evonet.lri.fr/CIRCUS2/node.php?node=148>
<http://developer.apple.com/documentation/GraphicsImaging/Conceptual/ 
drawingwithquartz2d/dq_paths/chapter_4_section_2.html>
<http://www.autodesk.fr/adsk/servlet/index?siteID=458335&id=6013861>
<http://www-sop.inria.fr/semir/personnel/Laurent.Mirtain/ldap- 
livre.html>
<http://www.shirky.com/writings/powerlaw_weblog.html>


This one is about strings figures:

<http://www.darsie.net/string/>


And image captions are an integral part of Wikipedia as you can see  
on many pages:

<http://en.wikipedia.org/wiki/Amerindians>
<http://en.wikipedia.org/wiki/Oroonoko>
<http://en.wikipedia.org/wiki/Earthquake>
<http://en.wikipedia.org/wiki/Lithosphere>
...


Currently, most people use either <table> or <div class="..."> 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[2]. 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 probably do, he had  
to create his own solution.

By 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. I think the use case is huge.

  [2]: <http://www.simplebits.com/notebook/2004/01/20/ 
sqxi_conclusion.html>


Michel Fortin
michel.fortin at michelf.com
http://www.michelf.com/