by Matthias Willerich on November 20 2007, 08:28
Recently I’ve built a very small and compact project, an 8-page static website actually (first time I’ve built anything static in about 7 years!), and I took the opportunity to get a bit deeper into the microformat madness that seems to be so en vogue since the last year or so.
hCard yay, figure nay?
While the whole hCard/vCard thing for contacts is a very nice and half-decent working solution, the discussion for image/figure markup is just confusing.
And then of course there’s the solution by Edward O’Connor that wants to follow the html 5 draft as closely as possible, which is the reasoning I could follow the easiest, because it’s also, in my eyes, the one closest to the concept that was used for the hCard.
Break it, fix it
I started using a variation of it, and the first thing that annoyed me was that I did want to mark-up caption and credit individually, but I needed to position it quite freely as a block. The suggestion on the microformats wiki would allow for individual positioning, the solution at A List Apart seemed a bit over the top, so I adjusted the original idea as follows:
<div class="figure"> <img src="look_up_dere__small.jpg" width="400" height="602" alt="Matthias and lots of blue sky" /> <div class="legend"> <p class="caption"> Matthias and lots of blue sky </p> <p class="credit"> <abbr class="type" title="Photograph">Photo</abbr> © <cite>Matthias Willerich</cite> </p> </div> </div>
This follows the html 5 draft as per suggestion on one hand, even more so because “legend” is used, on the other it allows me to specify caption and copyright individually, but I have the freedom to style and position it anywhere together or individually.
It took me a while to understand what Edward meant by “This has block-level elements with inline-level siblings, which is gross”, until I read Anne van Kesteren’s opinion about Markup content models.
I would’ve followed what he’s saying, but at that point my project was already out the door. Nevermind, here’s a suggested amendment:
<div class="figure"> <p class="image"><img src="look_up_dere__small.jpg" width="400" height="602" alt="Matthias and lots of blue sky" /></p> <div class="legend"> <p class="caption"> Matthias and lots of blue sky </p> <p class="credit"> <abbr class="type" title="Photograph">Photo</abbr> © <cite>Matthias Willerich</cite> </p> </div> </div>
what’s the benefit?
With all this highbrow talk I don’t want to miss the point that I’ll never be in the situation again where I’m creating a template with text information associated to an image and I just don’t know how to do it right. This had been bugging me forever! With all the other concepts I just default to when I see a screen design the first time, this one fits right in. Here’s a little example page to have a look at how flexible this can be used.
Back to the highbrow future
Still, it left me wondering if I’m breaking a structure that’s used in other places; but I couldn’t find any (if you disagree, now is the time). If there was nothing using the figure markup, hell, why think about it in the first place, and not just throw together any old image and paragraph? Now, I was at that point with the hCards a while ago, but since then an hCard extension for firefox has come along, and with the current version it’s actually reasonably useful. I also agree very much with Dan Cederholms feedreader train of thought about how it could be used. While his article is already 2 years old, and not much technical seems to have happened in between, it doesn’t mean that its theoretical meaning isn’t picked up and formatted or used otherwise in the future.
Although they’re spread out all over the article, here’s the reading list that helped me with my conclusion. Have fun reading and let me know what you think.