In Chris’ figure markup proposal, he uses (and I adopted) the semantically-neutral labels figure-a, figure-b, &c., to tag figures for different presentations.

Paul Wilkins’ wrote an excellent commentary on this technique, in which he proposes to borrow terminology from the publishing industry to describe each of these sorts of figures. I’ve adopted several of his terms for use in my own figure markup, replacing figure-b with inset and so on.

In addition, I use alternate to change the way things are floated, much like Garrett Dimon in “Coding for Content.” What Garrett calls clean, Paul calls cutout; I’ve adopted the latter term.

I’ve written up XMDP for my figure markup—feel free to use it if you like.

As examples, here’s the markup for the two figures appearing in “A day at the races:”

<div class="figure stand-alone">
  <p>
    <a href="http://flickr.com/photos/37699593@N00/1250927685/"><img
    src="http://farm2.static.flickr.com/1117/1250927685_c6d1a3126f.jpg"
    alt="My $70 horse" /></a>
  </p>
  <p class="caption postamble">
    Jay&#8217;s shot of Chief Teddybear winning <a
    href="http://www.dmtc.com/racinginfo/results/summary/070825.html"
    >race 3</a>.
  </p>
</div>

Had I omitted stand-alone from @class, the figure would be full-width, like in “Bold Thady Quill.”

<div class="figure inset">
  <p>
    <a href="http://flickr.com/photos/kirinqueen/1254560550/"><img
    src="http://farm2.static.flickr.com/1438/1254560550_887bb2c5d2_m.jpg"
    title="Jay&#8217;s on the left, Reed&#8217;s in the middle, and
           I&#8217;m on the right"
    alt="Jay, Reed, and me, at the racetrack" /></a>
  </p>
  <p class="caption postamble">
    Enjoying the day with Jay and Reed
  </p>
</div>

I float inset figures right by default; had I included the alternate class, this figure would have floated left instead.