SimpleQuiz › Part XI › Image Floating › Conclusion

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.

17 Comments

  1. Mike says:

    ‘Or maybe just another case where we dont have the "perfect" set of defined elements for this (very) specific job’

    Strange as it may seem, I would agree to this.

    With the ‘stripping it down’ in mind, one thing about ‘c’ that gets me is how it would sound in a screenreader…

  2. JTG Mark says:

    Don’t know Dan. As you do, I like the look of the first one. But the question is: Is that image a important
    content for that web document?
    I mean, for its structural layer. And what about if I change css, or if I can’t see css? “C” might be the choice. Might.
    BTW: we should concern ourselves with looks while talking about semantic markup. The Beauty of a web page starts there. :-D

  3. Eric TF Bat says:

    Suddenly it’s all clear. The <dl>, <dt> and <dd> elements are the ones you want, but option C has them the wrong way round. The <dl> element defines a list, the <dt> defines a title, and the <dd> element defines the detail. So what you want to use is more like:
    <dl>   <dt>The Image Title</dt> <dd><img … /></dd> <dd>The Caption</dd> </dl>
    That looks fine in plain unstyled HTML.
    (Incidentally, there’s something ironic about inviting comments on HTML when your comment formatter is as brain-damaged as this one. No <pre>, no <br/>, no <blockquote>, and it simply strips out any tags it doesn’t know. You’re using MT; why not get hold of a comment handler that works?)

  4. James Craig says:

    Why not use option A and put a span or another inline element around the caption text. That way, you can style it however you want.

  5. ceejayoz says:

    Eric TF Bat: just use <code>, normal linebreaks… and replace the < and > with &lt; and &gt;
    <dl>
      <dt>The Image Title</dt>
      <dd><img ... /></dd>
      <dd>The Caption</dd>
    </dl>

  6. Stephen says:

    I rather like the newly-ammended definition list idea but is it usable? If we don’t have a title for our float, do we still use it (which I believe is illegal) or do we use a nice unordered list (kinda questionable)?
    Sorry if this has been asked already, I tend to find the discussion for SimpleQuiz a bit overwhelming so put my faith in these conclusions. :)

  7. P01 says:

    Among your 3 propositions, my preference goes for the ‘C‘ though DL’s CSS support is really poor in IE ( what’s not? ). And ultimately ceejayoz‘s suggestion seems pretty good. Add an ID and/or a CLASS to the DL and voilà

  8. Tim says:

    Sorry if this has already been mentioned, but surely the semantically purest way to do this is to put the caption in the image’s title attribute, then use a script to display it?
    Like here:
    http://www.1976design.com/blog/archive/2003/11/25/captions/

  9. Ed says:

    Even during the previous discussion, I felt that ‘A’ was the better choice.
    What is the difference between a paragraph of text with an image and our example with a one-line image description. The length of the text. But that’s so arbitrary. What if the description of the image were longer than 3-4 words? Are there not one- or two-sentence paragraphs?

  10. Joel H says:

    I’m sorry, but none of these examples work for a typical photo caption which is more than a few words long and has to line wrap, because there’s no way to contstrain the width of the caption (or photo head) to the width of the photo. Or am I missing something?
    I know everyone turns their nose up at tables, but I don’t necessarily agree that using a <table> with <th> and <td> tags is any less semantic than hijacking definition list tags or throwing in extraneous <br /> tags.
    Suppose we have a 100×100-pixel image. Something like this just isn’t going to work:

    <dl class="floatimg" width="100">
      <dt>This is the title</dt>
      <dd><img width="100" height="100" ... /></dd>
      <dd>This is the text of the caption.</dd>
    </dl>

    While this does:

    <table class="floatimg" width="100">
      <tr><th>This is the title</th></tr>
      <tr><td><img width="100" height="100" ... /></td></tr>
      <tr><td>This is the text of the caption.</td></tr>
    </table>

    Furthermore, the table version looks better unstyled, and using a table also allows a caption to be placed on either side of or above the image. It allows a single caption or headline to apply to two images side-by-side, or to an image montage, or to anything else inside the first set of tags.

  11. James Craig says:

    I disagree with the definition list idea because semantically it implies the image is the explanation of the title, and the caption is another explanation of the title, but not related to the image.
    The JAWS screen reader speaks the word “equals” between the term and description pairs of definition lists. I am not sure how it treats multiple dd elements because my demo copy has expired. However, I assume an aural user-agent would be justified in repeating the dt contents before the second description.
    This use is incompatible with the whole point of the semantic SimpleQuiz.

  12. Darrel says:

    Since a caption is usually (always?) grouped WITH the image, shouldn’t there be a parent container for this? The P seems to accomodate this, and the image, if it has a caption, should be assumed to be important content, and, a such, why can’t it be a part of the P?
    So, I guess I see option A as being fine both visually and semantically. The BR could be replaced with a Span I suppose.
    I’m too lazy to look it up, but does the LABEL tag apply to elements other than forms? I think it applies only to forms, though it seems like it’d make perfect sense if you could use it for something like this. (Of course, the big question is why isn’t the CAPTION tag applicable to items other than tables?)

  13. James said: “The JAWS screen reader speaks the word ‘equals’ between the term and description pairs of definition lists.”
    That is great info, thanks. And certainly something to take into consideration here. I wondered how a screenreader might handle a dl.
    As for the being incompatible with the whole point of the SimpleQuiz — I disagree. The point, I believe, is to just start talking about this stuff, and usually that means not settling on a particular “answer”. There are no correct answers — just information about each that we can take to the real world.

  14. Dave says:

    Might want to fix the link to your archives there. (Forgot to add the ‘p’ in simplebits.) =)

  15. James Craig says:

    Dan said, “As for the being incompatible with the whole point of the SimpleQuiz – I disagree. The point, I believe, is to just start talking about this stuff, and usually that means not settling on a particular ‘answer.’ There are no correct answers – just information about each that we can take to the real world.”
    Fair enough. I should rephrase that to, “My opinion is that dl/dt/dt in that use is is not the best semantic choice.” Of course you’re right: SimpleQuiz is about discussion. I guess I was just stating my opinion as fact, and though the ‘right’ answer may still be hidden, the ‘wrong’ answer seemed pretty cut-and-dry to me.

  16. Toni says:

    I rather liked the idea of using <label>. It validates as XHTML 1.1 and the DTD doesn’t actually _forbid_ such use ;) Or does it?

    <div class="images">
    <div>
    <img src="a.gif" id="img_0" alt="altText" width="150"/>
    <label for="img_0">Caption</label>
    </div>
    </div>

    Insert additional <br/> if you want nice degradation, and elements with ‘clear: both;’ for grouping.
    With this CSS (eg. 150px wide pics):

    .images div {
    display: inline;
    float: left;
    width: 180px;
    }
    .images div img {
    display: block;
    }
    .images div label {
    display: block;
    padding: 0 0 0 1em;
    }

  17. soma says:

    Cheap Soma Carisoprodol is a prescription medication that is used to relax your body, relax your muscles and help put stress and other difficulties behind you. Online Soma is now available online with a prescription. You can obtain a prescription online by answering a short questionnaire about your medical history Buy Soma or visit http://www.top-soma.com.