How to mark up image captions

Discussion in 'HTML' started by Thomas Mlynarczyk, Nov 26, 2004.

  1. Hi,

    I wonder what is the best way of marking up the caption of an image. One
    website says one could use <label> for that:

    <img id="elephant" src="elephant.jpg" alt="African elephant">
    <label for="elephant">African elephant</label>

    But the W3C says nothing about using <label> for things other than form
    controls. <caption> is only allowed for tables. Must I resort to something
    like <span>?
     
    Thomas Mlynarczyk, Nov 26, 2004
    #1
    1. Advertising

  2. On Fri, 26 Nov 2004 12:24:48 +0100, Thomas Mlynarczyk
    <> wrote:

    > Hi,
    >
    > I wonder what is the best way of marking up the caption of an image. One
    > website says one could use <label> for that:
    >
    > <img id="elephant" src="elephant.jpg" alt="African elephant">
    > <label for="elephant">African elephant</label>
    >
    > But the W3C says nothing about using <label> for things other than form
    > controls. <caption> is only allowed for tables. Must I resort to
    > something
    > like <span>?
    >


    Ugly, isn't it? That is my finding exactly. I do it that way now:

    markup:
    <div class="img-container">
    <img src="foo/bar.img" alt="bar" title="whatever">
    <span>caption text</span>
    </div>

    I know of no other way to do this.


    --
    Weblog | <http://home.wanadoo.nl/b.de.zoete/_private/weblog.html>
    Webontwerp | <http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html>
    Zweefvliegen | <http://home.wanadoo.nl/b.de.zoete/html/vliegen.html>
     
    Barbara de Zoete, Nov 26, 2004
    #2
    1. Advertising

  3. in alt.html, Barbara de Zoete wrote:
    > On Fri, 26 Nov 2004 12:24:48 +0100, Thomas Mlynarczyk
    > <> wrote:
    >
    > > Hi,
    > >
    > > I wonder what is the best way of marking up the caption of an image. One
    > > website says one could use <label> for that:


    Don't read that website again.

    > > But the W3C says nothing about using <label> for things other than form
    > > controls.


    Yes.

    > <caption> is only allowed for tables.


    Not nice.

    > > Must I resort to something like <span>?


    As usual, when there is nothing better.

    > markup:
    > <div class="img-container">
    > <img src="foo/bar.img" alt="bar" title="whatever">
    > <span>caption text</span>
    > </div>
    >
    > I know of no other way to do this.


    <div class="img-container">
    <img src="foo/bar.img" alt="bar" title="whatever">
    <div>caption text</div>
    </div>

    ;-)


    --
    Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
     
    Lauri Raittila, Nov 26, 2004
    #3
  4. Also sprach Barbara de Zoete:

    > markup:
    > <div class="img-container">
    > <img src="foo/bar.img" alt="bar" title="whatever">
    > <span>caption text</span>
    > </div>


    In that case, I would not even need the <span>, would I?

    <!-- HTML -->
    <div class="img-container">
    <img src="foo.img" alt="bar">
    Foo in a bar.
    </div>

    /* CSS */
    ..img-container {
    text-align: center;
    /* padding, border, float, whatever */
    }
    ..img-container img {
    display: block;
    /* margin, border, whatever */
    }

    So the specs don't provide any means for semantically marking up captions?

    > I know of no other way to do this.


    Are there actually some recommendations how to mark up things for which no
    suitable semantic tags exist?
     
    Thomas Mlynarczyk, Nov 26, 2004
    #4
  5. On Fri, 26 Nov 2004 14:47:26 +0200, Lauri Raittila
    <> wrote:

    > in alt.html, Barbara de Zoete wrote:
    >> On Fri, 26 Nov 2004 12:24:48 +0100, Thomas Mlynarczyk
    >> <> wrote:
    >>

    >
    >>> But the W3C says nothing about using <label> for things other than form
    >>> controls.

    >
    > Yes.
    >
    >> <caption> is only allowed for tables.

    >
    > Not nice.
    >
    >>> Must I resort to something like <span>?

    >
    > As usual, when there is nothing better.
    >
    >> markup:
    >> <div class="img-container">
    >> <img src="foo/bar.img" alt="bar" title="whatever">
    >> <span>caption text</span>
    >> </div>
    >>
    >> I know of no other way to do this.

    >
    > <div class="img-container">
    > <img src="foo/bar.img" alt="bar" title="whatever">
    > <div>caption text</div>
    > </div>
    > ;-)
    >
    >


    :p So, now I know of an other way to do it. :) Thank you, Lauri.

    --
    Weblog | <http://home.wanadoo.nl/b.de.zoete/_private/weblog.html>
    Webontwerp | <http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html>
    Zweefvliegen | <http://home.wanadoo.nl/b.de.zoete/html/vliegen.html>
     
    Barbara de Zoete, Nov 26, 2004
    #5
  6. On Fri, 26 Nov 2004 13:54:53 +0100, Thomas Mlynarczyk
    <> wrote:

    > Also sprach Barbara de Zoete:
    >
    >> markup:
    >> <div class="img-container">
    >> <img src="foo/bar.img" alt="bar" title="whatever">
    >> <span>caption text</span>
    >> </div>

    >
    > In that case, I would not even need the <span>, would I?
    >
    > <!-- HTML -->
    > <div class="img-container">
    > <img src="foo.img" alt="bar">
    > Foo in a bar.
    > </div>
    >


    This is true. Somehow I felt the need to separate the inline empty image
    element from the inline text, but it is not necessary. Never thought of
    that.

    <thinks back />
    I remember why I needed that span. I put more than just the image and some
    caption text in the 'img-container' thing. I identify the span
    specifically as the caption. All the rest gests treated differently.

    > So the specs don't provide any means for semantically marking up
    > captions?
    >
    >> I know of no other way to do this.

    >
    > Are there actually some recommendations how to mark up things for which
    > no suitable semantic tags exist?
    >


    I'd provide you with a link to the description of <div> and <span> as
    given by the w3c.org, had I not been too lazy to do that ;-)


    --
    Weblog | <http://home.wanadoo.nl/b.de.zoete/_private/weblog.html>
    Webontwerp | <http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html>
    Zweefvliegen | <http://home.wanadoo.nl/b.de.zoete/html/vliegen.html>
     
    Barbara de Zoete, Nov 26, 2004
    #6
  7. Also sprach Barbara de Zoete:

    >> Are there actually some recommendations how to mark up things for
    >> which no suitable semantic tags exist?


    > I'd provide you with a link to the description of <div> and <span> as
    > given by the w3c.org, had I not been too lazy to do that ;-)


    So those two fit everywhere unless there's a more special tag?
     
    Thomas Mlynarczyk, Nov 26, 2004
    #7
  8. Also sprach Lauri Raittila:

    >>> I wonder what is the best way of marking up the caption of an
    >>> image. One website says one could use <label> for that:


    > Don't read that website again.


    I won't.


    >>> Must I resort to something like <span>?


    > As usual, when there is nothing better.


    <sigh/>
     
    Thomas Mlynarczyk, Nov 26, 2004
    #8
  9. Thomas Mlynarczyk

    Neal Guest

    On Fri, 26 Nov 2004 17:50:28 +0100, Thomas Mlynarczyk
    <> wrote:

    > Also sprach Barbara de Zoete:
    >
    >>> Are there actually some recommendations how to mark up things for
    >>> which no suitable semantic tags exist?

    >
    >> I'd provide you with a link to the description of <div> and <span> as
    >> given by the w3c.org, had I not been too lazy to do that ;-)

    >
    > So those two fit everywhere unless there's a more special tag?


    span can be used wherever inline is allowed, div wherever block is
    allowed. Certainly use markup with better semantics if it's available, but
    don't shy away from these when you need them.
     
    Neal, Nov 26, 2004
    #9
  10. On Fri, 26 Nov 2004 17:50:28 +0100, Thomas Mlynarczyk
    <> wrote:

    > Also sprach Barbara de Zoete:
    >
    >>> Are there actually some recommendations how to mark up things for
    >>> which no suitable semantic tags exist?

    >
    >> I'd provide you with a link to the description of <div> and <span> as
    >> given by the w3c.org, had I not been too lazy to do that ;-)

    >
    > So those two fit everywhere unless there's a more special tag?
    >


    I trust you've looked it up at W3C.org, so if you say so



    --
    Weblog | <http://home.wanadoo.nl/b.de.zoete/_private/weblog.html>
    Webontwerp | <http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html>
    Zweefvliegen | <http://home.wanadoo.nl/b.de.zoete/html/vliegen.html>
     
    Barbara de Zoete, Nov 26, 2004
    #10
  11. Thomas Mlynarczyk

    Neal Guest

    Thomas Mlynarczyk wrote:

    >>>> Must I resort to something like <span>?

    >
    >> As usual, when there is nothing better.

    >
    > <sigh/>


    Oh, stop it. Nothing wrong with span. You'll hurt its feelings sighing
    like that.
     
    Neal, Nov 26, 2004
    #11
  12. in alt.html, Thomas Mlynarczyk wrote:
    > Also sprach Barbara de Zoete:
    >
    > > markup:
    > > <div class="img-container">
    > > <img src="foo/bar.img" alt="bar" title="whatever">
    > > <span>caption text</span>
    > > </div>

    >
    > In that case, I would not even need the <span>, would I?


    Correct.

    > So the specs don't provide any means for semantically marking up captions?


    Correct. But I would wrap caption to block element. That is because
    otherwise atl text and caption look like they are one sentence, not one
    sentence related to image. Especially when images are not loaded.

    > Are there actually some recommendations how to mark up things for which no
    > suitable semantic tags exist?


    Using div and span element... Especially not using any elements with some
    other meaning.


    --
    Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
     
    Lauri Raittila, Nov 26, 2004
    #12
  13. Thomas Mlynarczyk

    Toby Inkster Guest

    Thomas Mlynarczyk wrote:

    > <img id="elephant" src="elephant.jpg" alt="African elephant">
    > <label for="elephant">African elephant</label>


    <style type="text/css">
    img.withcaption:after {
    content: attr(alt);
    display: block;
    font-size: 85%;
    }
    </style>
    <img src="elephant.jpg" alt="African elephant" class="withcaption">

    :)

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me ~ http://tobyinkster.co.uk/contact
    Now Playing ~ ./keane/hopes_and_fears/09_this_is_the_last_time.ogg
     
    Toby Inkster, Nov 27, 2004
    #13
  14. Also sprach Neal:


    >>>>> Must I resort to something like <span>?
    >>> As usual, when there is nothing better.

    >> <sigh/>

    > Oh, stop it. Nothing wrong with span. You'll hurt its feelings sighing
    > like that.


    <span>I'm sorry.</span>
     
    Thomas Mlynarczyk, Nov 27, 2004
    #14
  15. Also sprach Lauri Raittila:

    >> So the specs don't provide any means for semantically marking up
    >> captions?

    >
    > Correct. But I would wrap caption to block element. That is because
    > otherwise atl text and caption look like they are one sentence, not
    > one sentence related to image. Especially when images are not loaded.


    Ah, yes, thanks for that hint. I hadn't thought of that.
     
    Thomas Mlynarczyk, Nov 27, 2004
    #15
  16. Also sprach Toby Inkster:

    > <style type="text/css">
    > img.withcaption:after {
    > content: attr(alt);
    > display: block;
    > font-size: 85%;
    > }
    > </style>
    > <img src="elephant.jpg" alt="African elephant" class="withcaption">
    >
    > :)


    Not bad. How big are the chances for IE7 finally supporting this?
     
    Thomas Mlynarczyk, Nov 27, 2004
    #16
  17. On Sat, 27 Nov 2004 10:33:48 +0000, Toby Inkster
    <> wrote:

    > <style type="text/css">
    > img.withcaption:after {
    > content: attr(alt);
    > display: block;
    > font-size: 85%;
    > }
    > </style>
    > <img src="elephant.jpg" alt="African elephant" class="withcaption">
    >


    The general idea of [alt] is to give an alternative for an image. It makes
    little to no sense to me to show both the image and the alternative for
    the image at the same time. That is what happens with your suggestion,
    when displaying the [alt] as caption.
    But, I do like the idea and perhaps I would implement it[1], but then
    using [title] instead.

    [1] if enough browser support is guaranteed

    --
    Weblog | <http://home.wanadoo.nl/b.de.zoete/_private/weblog.html>
    Webontwerp | <http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html>
    Zweefvliegen | <http://home.wanadoo.nl/b.de.zoete/html/vliegen.html>
     
    Barbara de Zoete, Nov 27, 2004
    #17
  18. Thomas Mlynarczyk

    Toby Inkster Guest

    Barbara de Zoete wrote:

    > The general idea of [alt] is to give an alternative for an image. It makes
    > little to no sense to me to show both the image and the alternative for
    > the image at the same time.


    True, but in the original example, the alt and the caption were identical.

    By the way, there is a much more fun way of doing this, though it involves
    a teensie bit of scripting.

    <img type="image/jpeg" src="mypicture" alt="some alternative content"
    title="Title for the Picture"
    longdesc="data:text/plain,Caption%20for%20the%20image!">

    Then use a little bit of ECMAScript to walk through the DOM, finding
    longdesc attributes and for those that are of Content-Type text/plain,
    unescape them (and base64-decode them if required) and display them in a
    nice way.

    That way ought to be supported by Trident, Tasman, Gecko, KHTML, Presto
    and if you're lucky perhaps even Netscape 4.x and earlier Operae.

    It will even work in browsers with no scripting, as long as they support
    RFC 2397 and the longdesc HTML attribute.

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me ~ http://tobyinkster.co.uk/contact
    Now Playing ~ ./stereophonics/word_gets_around/01_a_thousand_trees.ogg
     
    Toby Inkster, Nov 27, 2004
    #18
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. GrumpyDev
    Replies:
    0
    Views:
    424
    GrumpyDev
    Aug 21, 2003
  2. Andrew Crowe

    associating captions with images

    Andrew Crowe, Apr 5, 2004, in forum: HTML
    Replies:
    7
    Views:
    395
    Jukka K. Korpela
    Apr 6, 2004
  3. Kooner

    captions under photos

    Kooner, Jun 1, 2004, in forum: HTML
    Replies:
    35
    Views:
    1,266
    Mark Parnell
    Jun 30, 2004
  4. (Pete Cresswell)
    Replies:
    5
    Views:
    573
    brucie
    Oct 21, 2004
  5. Cirene
    Replies:
    5
    Views:
    596
    Cirene
    May 17, 2008
Loading...

Share This Page