Back in February, Garrett Dimon blew me away with his site redesign. Inspired by the look of captioned figures in this article, I went about redoing how I mark up and style such figures here. Since then, POSH has become the new hot thing, and several others have recently written about their figure markup, notably Chris and Garrett. So, in the interests of publishing and discussing my own POSH patterns, I thought I’d start with documenting how I mark up figures and why.

I think it’s important to reuse names etc. from pre-existing standards, so I set out to do so in this case. Actually, there’s a sense in which I’m also doing this backwards — I’m looking to future standards, most notably HTML5. I described this to microformats-new a few months ago: I write up the idiomatic HTML5 for something, then convert new elements into some kind of backwards-compatible analogue, e.g. menu → ol.menu, figure → div.figure, etc.

HTML5 introduces a <figure> element, which looks like so:

<figure>
  <legend>Caption goes here</legend>
  <img src="/path/to/img.png" alt="blah blah blah" />
</figure>

You might be wondering why HTML5 uses <legend> here instead of <caption>. It has to do with the way legacy browsers handle <caption> — basically, reusing <caption> outside of <table> would break the web.

Here’s a first cut at recasting this into some kind of forward-looking HTML4:

<div class="figure">
  <p class="caption">Caption goes here</p>
  <img src="/path/to/img.png" alt="blah blah blah" />
</div>

This has block-level elements with inline-level siblings, which is gross, so let’s ensure they’re all block level:

<div class="figure">
  <p class="caption">Caption goes here</p>
  <p><img src="/path/to/img.png" alt="blah blah blah" /></p>
</div>

This is looking pretty good.

Another source of prior art and/or inspiration is RFC 2629, which defines an XML language used for writing RFCs (many of which contain captioned ASCII diagrams). Here’s how RFC 2629 treats figures:

<figure>
  <preamble>blah blah blah</preamble>
  <artwork>
    ASCII art goes here
  </artwork>
  <postamble>blah blah blah</postamble>
</figure>

POSH note: this is where my use of <pre class="artwork"> for ASCII art comes from. For instance, this depiction of the microformats process uses such markup.

I already had lots of content where I had text associated with an image both above it and below it, so RFC 2629’s <preamble> and <postamble> seemed a nice fit. Adding it all up, here’s what we get:

<div class="figure">
  <p class="caption preamble">Caption goes here</p>
  <p><img src="/path/to/img.png" alt="blah blah blah" /></p>
  <p class="postamble">blah blah blah</p>
</div>

As far as positioning goes, I’ve adopted Chris’s class="figure-b" and class="figure-c" for when I’d like figures floated to one side or the other. I’ve updated my approach to figure markup.