SitePoint Sponsor

User Tag List

Results 1 to 21 of 21
  1. #1
    SitePoint Addict rabbitsfeat's Avatar
    Join Date
    Nov 2006
    Posts
    334
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Semantic Image Caption

    What's the most semantic way to code a caption below an image?

    The image has 8px of padding around it although there will be more below it to fit the caption, which I'd like to appear within the border.

  2. #2
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What's wrong with this?
    Code HTML4Strict:
    <div><img src="..." alt="..."> Caption text</div>
    Then use display:block on the img element to make the text appear below.

    If the combination of alt text and caption text constitutes a paragraph, then you can use <p>...</p> instead of <div>...</div>.
    Birnam wood is come to Dunsinane

  3. #3
    SitePoint Addict rabbitsfeat's Avatar
    Join Date
    Nov 2006
    Posts
    334
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok I ended up doing it like this:

    Code:
    <div class="floatright">
          <img src="images/sc.jpg" alt="Photograph of Stephen Cummins" width="196" height="243" /><br />Stephen Cummins born Emsworth Hampshire 1943
          </div>
    Code:
    .floatright {
    		float: right;
    		width: 196px;
    		margin: 0 20px;
    		border: 1px solid #dcddcb;
    		padding: 8px;
    		color: #67534d;
    		font-size: 1.1em;
    		/*background-color: #e9ebde;*/
    		}

    If the combination of alt text and caption text constitutes a paragraph
    What do you mean by this?

  4. #4
    SitePoint Wizard bronze trophy C. Ankerstjerne's Avatar
    Join Date
    Jan 2004
    Location
    The Kingdom of Denmark
    Posts
    2,702
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    I would suggest using a definition list. Aside from being semantically suitable, it gives the added advantage of allowing additional semantics (I've added some examples below). Also, unless you actually put more contents in the ALT attribute than in the caption, you should leave the ALT attribute blank.

    Code html4strict:
    <dl class="photograph">
      <dt><img src="..." width="..." height="..." alt=""></dt>
        <dd class="caption">A pretty image</dd>
        <dd class="photographer">Some guy</dd>
        <dd class="date">2008-01-01</dd>
        <dd class="location">Somewhere</dd>
    </dl>
    Christian Ankerstjerne
    <p<strong<abbr/HTML/ 4 teh win</>
    <>In Soviet Russia, website codes you!

  5. #5
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    A list with only one item isn't really a list, though, even if it's syntactically valid.
    Birnam wood is come to Dunsinane

  6. #6
    SitePoint Wizard bronze trophy C. Ankerstjerne's Avatar
    Join Date
    Jan 2004
    Location
    The Kingdom of Denmark
    Posts
    2,702
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    I have considered the same thing. It is odd, yes, but I don't consider it wrong for a few reasons.
    1. The HTML 4.01 specification states that 'All lists must contain one or more list elements.' This if of course a technical definition, but I still consider it am important argument.
    2. In my oppinion, the added semantic value outweighs the disadvantage of the somewhat odd one-item list.
    3. If I had to define a single word, I would use a definition list, since there is not better alternative. If I accept one-item lists in one instance, I have to accept them in other instances as well.
    Christian Ankerstjerne
    <p<strong<abbr/HTML/ 4 teh win</>
    <>In Soviet Russia, website codes you!

  7. #7
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by rabbitsfeat View Post
    What do you mean by this?
    Exactly what I said.

    If the alt attribute value followed by the caption text can be considered to be a paragraph of text, then you can wrap them using <p> instead of <div>.
    Birnam wood is come to Dunsinane

  8. #8
    SitePoint Addict rabbitsfeat's Avatar
    Join Date
    Nov 2006
    Posts
    334
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well I wouldn't really call it a paragraph of text:

    Code:
    <div class="floatright">
          <img src="images/sc.jpg" alt="Photograph of Stephen Cummins" width="196" height="243" />Stephen Cummins born Emsworth Hampshire 1943
          </div>
    What do you think?

  9. #9
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In this case the text equivalent doesn't seem to be of much use, since the same information can be found in the caption. I would use alt="" here, I think. With images off, you'd see this with your solution:
    Photograph of Stephen CumminsStephen Cummins born Emsworth Hampshire 1943
    That's also more or less what a screen reader would announce.
    Birnam wood is come to Dunsinane

  10. #10
    SitePoint Addict rabbitsfeat's Avatar
    Join Date
    Nov 2006
    Posts
    334
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for that—implemented!

  11. #11
    SitePoint Evangelist Ed Seedhouse's Avatar
    Join Date
    Aug 2006
    Location
    Victoria, B.C. Canada
    Posts
    592
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If we want to associate each image with a caption then the image and the caption go together. So semantically they should be part of the same structure because they refer to each other.

    A definition list fills the need quite nicely, with the image being the "word" and the caption being the "definition". The DL was not designed just for words as is pointed out on the W3C site by the folks who designed it.

    I think any other semantic structure would not capture the relationship between the image and it's caption, and so cannot be as appropriate as the DL.

    So for an image/caption pair I conclude that the DL is the appropriate sematic structure and is what we should use.
    Ed Seedhouse

  12. #12
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The trouble is that the text equivalent (DT) and the caption (DD) seem to say the same thing. I don't think this would be appropriate:
    Code HTML4Strict:
    <dl>
      <dt>Photograph of Stephen Cummins</dt>
      <dd>Stephen Cummins born Emsworth Hampshire 1943</dd>
    </dl>
    (Showing the text equivalent in lieu of the image.)

    And with a null alt attribute it gets even worse. Then you have a definition for an empty term.
    Birnam wood is come to Dunsinane

  13. #13
    SitePoint Evangelist Ed Seedhouse's Avatar
    Join Date
    Aug 2006
    Location
    Victoria, B.C. Canada
    Posts
    592
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think you are missing the point, AutisticCookoo. If we have decided that we need a caption as content under the image then we have a related group of elements that belongs in a list. We should also have a descriptive alt tag as well. Sure that possibly repeats information and might seem odd to a non sited browser, but hearing something twice is better than not hearing it at all.
    Ed Seedhouse

  14. #14
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,875
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Do it the other way around with the caption in the <dt> and the image with alt="" in the <dd>.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  15. #15
    SitePoint Evangelist Ed Seedhouse's Avatar
    Join Date
    Aug 2006
    Location
    Victoria, B.C. Canada
    Posts
    592
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall View Post
    Do it the other way around with the caption in the <dt> and the image with alt="" in the <dd>.
    I hope I didn't suggest otherwise, because of course you are right and the IMG belongs in the DT element.
    Ed Seedhouse

  16. #16
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall View Post
    Do it the other way around with the caption in the <dt> and the image with alt="" in the <dd>.
    So you get a term without a definition. How's that better?

    To me this sounds like wishful thinking, like when people mark up forms as ordered lists. It's just a way to get your hands on a few extra elements to style.
    Birnam wood is come to Dunsinane

  17. #17
    SitePoint Enthusiast logothon's Avatar
    Join Date
    Mar 2007
    Location
    Irondequoit, NY
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AutisticCuckoo View Post
    The trouble is that the text equivalent (DT) and the caption (DD) seem to say the same thing. I don't think this would be appropriate:
    Code HTML4Strict:
    <dl>
      <dt>Photograph of Stephen Cummins</dt>
      <dd>Stephen Cummins born Emsworth Hampshire 1943</dd>
    </dl>
    (Showing the text equivalent in lieu of the image.)

    And with a null alt attribute it gets even worse. Then you have a definition for an empty term.
    I believe a definition list is what's needed here. I don't think it's a question of who it is but rather what it is. it's an image, and this the caption for the image. you could additionally rewrite the alt attribute: alt="A photograph of Stephen Cummins. ". with a space after the period. if the image doesn't load at least it's structurally sound if not redundant.

  18. #18
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Ed Seedhouse View Post
    If we want to associate each image with a caption then the image and the caption go together. So semantically they should be part of the same structure because they refer to each other.
    When the image and the caption have the same parent element (and no other siblings) they are together and are part of the same structure. So <div><img> caption</div> fills the need quite nicely. No?

    FWIW, in HTML5 you could do
    HTML Code:
    <figure>
     <img alt="" src="images/sc.jpg">
     <legend>Stephen Cummins born Emsworth Hampshire 1943</legend>
    </figure>
    But styling the legend doesn't work so well in existing browsers so this is not something I'd recommend at this point; it has been suggested that some other element name be used instead of legend.
    Simon Pieters

  19. #19
    SitePoint Evangelist Ed Seedhouse's Avatar
    Join Date
    Aug 2006
    Location
    Victoria, B.C. Canada
    Posts
    592
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by zcorpan View Post
    When the image and the caption have the same parent element (and no other siblings) they are together and are part of the same structure. So <div><img> caption</div> fills the need quite nicely. No?

    No, in my opinion. Simple having elements within a containg element implies very little in the way of semantic relationship. The relatioship here is, in my opinion, strong enough so that we should use elements that directly imply that relationship.

    That is my opinion, not the word of God. I am willing to be pursuaded differently by reason.
    Last edited by Ed Seedhouse; Sep 1, 2008 at 21:39.
    Ed Seedhouse

  20. #20
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,875
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by logothon View Post
    I believe a definition list is what's needed here. I don't think it's a question of who it is but rather what it is. it's an image, and this the caption for the image. you could additionally rewrite the alt attribute: alt="A photograph of Stephen Cummins. ". with a space after the period. if the image doesn't load at least it's structurally sound if not redundant.

    The caption should describe what the image is while the alt text sould explain why the image is there/what information the image is to convey. As these are not the same thing there should be no repetition when the alt text is displayed in place of the image.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  21. #21
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What information does the image convey in this context? Presumably it displays what the person looks like. Thus, the text equivalent should explain the person's appearace, e.g., alt="Tommy has grey hair, green eyes and a short full beard".
    Birnam wood is come to Dunsinane


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •