Definition list as image caption

[Thomas Humiston]

It's a good idea, Jakob. Despite the name of this HTML element (which HTML5 moves to rename as "description list"), it exists for exactly the sort of purpose you suggest -- or, as I like to say, "DT is some object, DD is something *about* that object".

No matter which implementation of Markdown (or anything else) one uses to wrap content in HTML, the question is, "What HTML element is appropriate for the job?" The answer isn't always stark, and DL has long been undervalued, misunderstood, and largely forgotten, but it is indeed the best choice in this case.

And in situations where the text includes discrete bits, such as a photograph's copyright info and the name of the photographer in addition to the caption, we see that it indeed becomes list-like, so that the appropriateness of using DL becomes even more apparent.

Here's an example of styling for a photo and caption info in a DL element. (Note: I made up the copyright info. If Wikipedia even allows hotlinking to their photos, I'd first look up the correct way of doing it before using this on a real site.)


div#example {
  max-width: 20em;
  }
dt {
  padding: 5px;
  border: 1px solid gray;
  margin-bottom: 5px;
  }
dt img {
  width: 100%;
  height: auto;
  }
dd {
  margin-left: 0; /* removes the indent */
  color: gray;
  font-size: small;
  }
dd.maker, dd.copyright {
  font-style: italic;
  font-size: x-small;
  margin-top: 1em;
  }
dd.maker {
  float: left;
  margin-right: 2em;
  }
dd.copyright {
  float: right;
  }


<div id=example>
<dl>
<dt><img src="http://upload.wikimedia.org/wikipedia/commons/f/fd/Fuzzy_Freddy.jpg" alt="Foxy Freddy, from Wikipedia">
<dd>Fox is a common name for many species of omnivorous mammals belonging to the Canidae family.
<dd class=maker>Photo by Rob Lee
<dd class=copyright>&copy;2012 Wikimedia / GPL
</dl>
</div>



Regards,
TH


On Jun 22, 2012, at 7:00 AM, Jakob wrote:


> recently though about image captions, then i realized that this could be achiebed by Markdown Extra's definition list feature:

> 

> ![alttext](http://exampl.com/img.jpg)

> : here goes the *caption*

> 

> What do you think?