How to mark up image captions

T

Thomas Mlynarczyk

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>?
 
B

Barbara de Zoete

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.
 
L

Lauri Raittila

Don't read that website again.
Yes.

<caption> is only allowed for tables.

Not nice.

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>

;-)
 
T

Thomas Mlynarczyk

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?
 
B

Barbara de Zoete

Not nice.


As usual, when there is nothing better.


<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.
 
B

Barbara de Zoete

Also sprach Barbara de Zoete:


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?


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 ;-)
 
T

Thomas Mlynarczyk

Also sprach Barbara de Zoete:
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?
 
N

Neal

Also sprach Barbara de Zoete:



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.
 
B

Barbara de Zoete

Also sprach Barbara de Zoete:



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
 
L

Lauri Raittila

Also sprach Barbara de Zoete:


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.
 
T

Toby Inkster

Thomas said:
<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">

:)
 
T

Thomas Mlynarczyk

Also sprach Lauri Raittila:
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.
 
T

Thomas Mlynarczyk

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?
 
B

Barbara de Zoete

<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
 
T

Toby Inkster

Barbara said:
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.
 

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,743
Messages
2,569,478
Members
44,899
Latest member
RodneyMcAu

Latest Threads

Top