Looking back on SimpleQuiz Part XI, I started thinking more about seeing an image and caption unstyled. Which option best shows the relationship between the image and its caption?
Here's a comparison of the three methods presented, without any CSS applied to them.
Pure semantics aside, I have to say I like the look of option A when unstyled. However, when adding CSS to the mix, I have less precise control over the style of the caption.
Option B looks very odd because of the paragraph separating the image and description. Many suggested option B, sans the paragraph surrounding the image, and this would look about the same in most browsers.
Option C seems to be a semantic improvement -- plenty of control over each item and it's arguable whether it's an appropriate situation for a definition list (I say.. why not?). The indentation is a bit weird -- but we shouldn't concern ourselves with looks when we're talking about semantic markup. Or should we?
Oftentimes, I keep an unstyled "view" of the document in mind when marking things up. How will this look in a text browser -- or in one where CSS is not present or supported. It's helpful at times in determining the best way to handle a particular bit of markup.
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.
See past SimpleQuiz questions in the archive.