SimpleQuiz › Part XI › Image Floating

Scott Plumlee

C is the only option that represents some sort of relationship between the image and the caption. So I would go with that. A caption can be a definition of an image, although it doesn’t have to be.

A doesn’t seem to embody the type of relation ship that exists between the image and caption. It contains the two items without clarifying the relationship at all. At least the definition list has a set format and relationship.

Maybe HTML needs some way to express the link between images and the text that often appears with them? Like an visible title attribute? Tables have a caption attribute, why not images?

aliotsy → www.thethousand.net

I agree with Scott, C makes the most sense. I was wondering though, should the alt text match the dd text?

blakems.com → www.blakems.com

I would have to go with B, but without the paragraph tags. They are not needed as the image can be styled with display: block;, thus wrapping the discription text to the next line.

web → www.ericwebster.net

B would make sence to me if there were not paragraph tag’s around the image. So D it is.

I love Daisy’s, w00t

Nick → www.pixel420.com

i agree with blakems.com. use b and get rid of the paragraph tags. something like….


.floatimg {
float: right;
text-align: center;
font-size: small;
}
.floatimg img {
display: block;
}


of course, if we were allowed to use the <caption> tag outside of tables, this would be a good occassion.

Jake → blahstuff.com/

The W3C likes P’s (whatever that’s worth).

Ryan Schroeder → www.whole-studios.com

The same thing could be accomplished with A and no p tags. If I’ve got several paragraphs in a row I’d hate to throw a div in there. Seems like the image/caption is just a another paragraph anyway.

BTW you float doesn’t in IE5/Mac

Gerrit Kaiser

Out of these three, I would go for “B”.
But in my daily use, I’d rather use something like
<div class=”floatimg”>
<img src=”” />
<span class=”caption”>Caption</span>
</div>

I think neither an Image nor its caption should be regarded as a paragraph and thus shouldn’t be markup up as one. Besides, why put another element around the Image?

stew → sub-division.com

aliosty - for good accessibility your caption shouldn’t be teh same as your alt text because people with screenreaders and non-visual browsers can be informed of the caption and the alt tag so it doesn’t make sense to have them the same and its also against some accesibility guidelines.

anyway back to the topic at hand,

i reckon A would be nicer in matinence but C makes sense semantically

Tobias

The alt text is not the same as the caption, as the alt text should be shown instead of the image, while the caption goes with the image.

nick → www.thinkless.org/

I never thought about the definition thing. I like that one best, demonstrating the relationship and what-not. But I’m open to just about anything that doesn’t use a <br />.

Alex H.

I’ve pretty much ruled out option A, as the <br /> tag is almost entirely unnecessary.

Option B doesn’t make sense, semantically, because an image is not a paragraph, and the caption usually isn’t either.

As Scott said, C is the only option that represents a relationship between the image and the caption. However, it’s not really a definition “list,” at least not in classical sense. Even so, this option makes the most sense to me, and is probably the one I’d use.

simon

I’d get rid of the p tag around the img but keep the p tag around the caption.

jason → www.jasonspage.net/

The semantic relationship of C makes the most sense “when floating img and caption within a body of text”. Being inside a body of text, p tags are already being used. The floated image gives visual meaning to the text, so I think that a <dl> fits this example.

Ilari Sani → x9n.com/

I’d love to give the caption as the image’s longdesc, then use :after to display it. Alas, this will not work in that one browser.

Jim

I agree with Ilari, except you are thinking of the title attribute, not longdesc (longdesc should be a URI pointing to a longer description).

Also, even if you are using redundant content to cater to Internet Explorer, don’t misuse the <p> element type - an image and its caption are not two paragraphs.

Corey

I agree with Gerrit. B minus the <p> tags as illustrated in his “daily use” example is closer to what I would use. I would forgo any relationship between the image and the caption, but make the caption more descriptive so it could stand on it’s own…

i.e. Figure 1 - Example of floating and image

Anonymous

(sub for ], sorry)
The problem with using solution b and nixing the [p] tags around the [img] is that it convey’s no relationship between the two parts of the whole. Imagine that you are trying to glean the relationship between the two by just looking at the source code, or more practically, through a text based browser or screen reader.
Now I don’t know how either of those two types of browsers handle [img/][p]…[/p] or [dl][dt][img/][/dt][dd][p]…[/p][/dd][/dl], but my guess is that if you chose C any browser would better be able to provide a relationship between the image and the caption. And isn’t that relationship all that we are trying to convey by floating the caption under the image?

Kjell Olsen

Did I forget my name?

Lenny → bloglenny.blogspot.com/

B is the closest to what I would do, but I would remove the <p> from the image and leave it for the caption.

Paul

I agree that B minus the <p>’s plus a little CSS to style makes the most sense, but what do non-CSS capable browsers see? You don’t want the text and the image on the same line.

In that case I think it makes the mose sense to use B—but to only wrap the caption in a <p>, not the image.

vlad → vlad.neosurge.net/

hesitantly, i vote for c. as previously mentioned, it conveys the relationship between the image and the descriptive text better than the other 2 methods. furthermore, an image and its caption seem to fit the term-definition construct of <dl><dt /><dd /></dl> nicely.

Brian → www.litzdesigns.com

Before I even saw the options I was thinking B, without the P tag around the image, but keep it for the caption(or use a span). Then I saw C, which makes total sense to keep the image and caption together. Since that image and caption is basically a thumbnail I think in most instances where I would use something to that effect the image would be linked. So this crossed my mind…


.float {
float: right;
margin: 10px;
}
.float span {
display: block;
margin-top: 10px;
text-align: center;
}


<a href="#" class="float"><img src="image.jpg" /><span>caption text</span></a>


So if the thumbnail needed to be linked this would be slightly leaner than pulling in an additional div or definition list.

So yeah, C. And my additional 2 cents.

Shaun Inman → www.shauninman.com/

Aliotsy: “should the alt text match the dd text?”

In this instance I would say no. I think the alt should only attempt to convey something about any relevant content in the image that isn’t covered by the caption. Any instance of the alt being visible/read instead of the image would be accompanied by the caption making that redundancy…um, redundant. Right?

Alex → cubecow.com/alex/

Why not D?
<img src="image.jpg" alt="alt text" title="caption text" class="floating">
along with the CSS rule:
img.floating {
content: attr(title);
display: block;
...
}
You can set margins and width somewhere else for display purposes. I like living on the bleeding edge.

Noel D. Jackson → leavesrustle.com

the attr(title) CSS styling isn’t always mutable enough.

I always see tags being neglected and this isn’t an exception…

Try small.

<div>
<img src=”blah.jpg” />
<small>caption</small>
</div>

David House

As I don’t care much for IE users, this is what I’d do:

img.floating { float: right }
/*display: block automatically assumed by parser*/
img.floating:after {
text-align: center;
content: attr(title);}

…

<img class=”floating” title=”Description” src=”image.gif” />

Vegard → www.vegard.net/

I don’t care much for the IE users either, but let’s face it: It’s still a hell of a lot of them out there. That makes the solution proposed by David and others a good one if you’re coding for your own personal I-reserve-the-right-to-choose-my-visitors-site, but a less good one if you’re doing commercial work.

In short: The solution depends on your target audience.

Ben Pirt → www.pirt.co.uk

Just thought I would cast my vote for option B, but without the <p> tag around the image. I know the w3c use this style, but it doesn’t really make that much sense to me to have a paragraph tag around an image.

I’m not really convinced that the caption is the definition of an image as in C, but in the cases where it is then this too would make sense.

Using :after would be a great solution (maybe in a few years time though)

Political → www.alteringtime.com/asylum/

I think C actually. I don’t see why a caption couldn’t be considered the definition of an image.

François Briatte → www.phnk.com

Solution C. Although comment 25 is quite witty, I’d like to use the title tag for something else (such as telling users they can click the picture to get it in larger format).

Mike → www.fiftyfoureleven.com

Wow, thanks for including the suggestion Dan! I used ‘c’ in a website and like it for both the semantic value and the extra stylehook that comes with the DL. What worried me was is it really semantically correct?

I know the way of the web moves slowly in terms of browsers, which ultimately have to render the document, but what happens if the W3C decides to tighten what DL is used for?
(in xhtml 3.0, for example ;-] )

At any rate, I vote ‘c’.

(image:after is a great theory, but I was looking for a real-world solution. Paying clients care about users.)

Guy

It’s not a paragraph or a list, so I’d go with B. As others have suggested, I’d also try to eliminate the paragraph tags around the image.

Chris Neale → cdn.mozdev.org/

regarding the demonstration not displaying as intended in MacIE …

don’t float declarations require an explicit width ?

Mike → www.fiftyfoureleven.com

I was wrestling with this problem a while back (when I submitted ‘c’ to Dan), and after reviewing what exactly I was wrestling with, some comments:

As has been mentioned by Scott and Nick, a caption tag would be a great solution.

Guy mentions that it is not a list, which is right, and neither is the markup - the definition list is not a normal list; although parhaps a stretch, it is an attempt at finding some semantic value to this situation that just happens to come with a great extra style hook.

The problem with ‘b’ and removing the paragraph tags and resorting to an empty length of text or span tags (or small) has been documented elsewhere.

Now, I am not sure I’d rather just refer to the figure in the text of the page, covering IE users, and then use the content: attr(title); idea. Perhaps a javascript workaround similar to Simon Willison’s Blockquote citations could get IE on board with this solution…

Anne → annevankesteren.nl

Wow, the suggestion made in comment 15 is just great!

img[longdesc]:after{
content:attr(longdesc,url);
}

Too bad it is only possible with a working draft of CSS3, which is never implanted in any browser. Besides; content:url(something.htm); /*or .txt*/ will not be implanted in Mozilla, a bug about that is marked as WONTFIX. Maybe suggestions like this will get it open again :-)

David House

longdesc is meant to be a URI, a link to a long description of the image, not the description itself.

Gerrit Kaiser

A lot of you guys are preferring the <dl>-Solution due to the semantic information it conveys. But an Image isn’t exactly a list, is it?

So why not use the following:

<div class=”floatimg”>
<dfn><img /></dfn>
<div class=”caption”>Caption</div>
</div>

Though the <dfn>-Element is rarely used, I think it fits here quite well. Essentially the caption IS defining the Image, isn’t it?
Also, this example degrades nicely without adding line breaks or unsuitable markup. But think about the ugly rendering of an unstyled Definition-List…

Mike → www.fiftyfoureleven.com

But an Image isn’t exactly a list, is it?

No, but from what I gather that’s not the matter here (wrt ‘c’) - what is of question is (imho), ‘are an image and it’s caption suitable for use in a definition list?’.

Or… ‘does the caption ‘define’ the image?

Dan → www.dynamicartwork.com

“I’m already looking forward to continue with bigger, better things in 2004.”

Bigger, better… beer? Woo-hoo!

As to the question…

During the course of coding my site, I had it set up at one time like option A. It’s the easiest one of them all if you don’t want it to do anything fancy.

Option B seams like it would give you more controll over display due to the additional P tags.

I wouldn’t use option C though as it’s not a list we’re making here. Quite frankly, both A and B would seam to work just fine unless there is something I’m overlooking here. I’ve only been coding CSS a few months now and am still very new to all this.

Here’s the way I have mine right now for my sub-galleries.

XHTML:
<p><a href="s-dunes1.html" title="Dunes I">I</a></p>

I have the image set as a background image in CSS for a rollover effect. Granted it’s not the most archaic-browser friendly but this is a fairly different use of the image float than the standard image-within-text use.

Anonymous

I like comment 38 with the dfn tag, but what about using dfn as the caption.

<div id=”fig1”>
<img src=”image.jpg” alt=”good alt text here” />
<dfn>Description goes here</dfn>
</div>

Anonymous

It’s a shame that <caption> is ‘wasted’ on tables… surely a table caption could have been <tc>, leaving <caption> open as a nice meaningfull tag for something so popular in DTP.

Anyway, I don’t think <p>’s or <dl>’s are appropriate, but concede that <p> may be the best of a bad bunch.

Given that the display of the image can be set to block, why do we need to mark-up the caption at all?

<div class='captionedImage'>
<img ...>
This is my meaningfull caption.



Styled with:

div.captionedImage img {
display: block;
}


There’s also the option of using the content of either the alt or longdesc attributes as the caption using either CSS or JS, although there’s a few browser not up to it — but I’d question that as an excuse.

Anonymous

I would go with C. I consider a caption a definition to an image, so this makes sense.

Ya, not much else to say that already hasn’t been said.

Lar → www.northcircle.com/

Vote ‘C’: but with regard to the image and caption, what about….

Description of image

Carsten Altena → www.max.nl

Of course, C is the best choice if you want your markup to be semantically correct.

However, it looks whacky in browsers and devices that do not understand CSS. And since there still a lot of web-enabled devices (phones, PDAs, refrigeraters :)) that are used to browse the web but don’t support CSS, I’d rather go for A. This is also the most compact solution and it looks good even without CSS-styling.

About B: again, I’m concerned with the way it looks unstyled. The B method would look odd; virtually every graphic/textbrowser adds a margin between paragraphs, so there will be a gap between the image and the description. With method A there’s a clear visual relationship between the image and its description.

When the day comes that most phones, PDAs and other web-enabled devices support CSS, I’d go for C. For now, it’l be A.

cafe fort → www.cafefort.com

IMHO, it’s C the good one, because semantically spoken, DT and DD are the semantic tags specifing a definition.
Any way, B is not so semantic, of course, coz’ ain’t no paragpraphs. A answer is also no so semantic, an image is not a paragraph too.

Shaun Inman → www.shauninman.com/

Wouldn’t it be possible to hijack the recently uncovered :hover fix to make :after work in IE? A little innerHTML here, some walking the node tree there and viola! I’ll play around with it tonight and see what I can come up with.

Shaun Inman → www.shauninman.com/

Hehe, got a little excited there. In which browser exactly does the :after pseudo-element work? I was under the impression that it worked in anything other than IE but it doesn’t seem to work in Safari 1.0 or Firebird 0.7. My apologies for temporarily hijacking the thread Dan.

michaud

Why not place the image in a span and in this span a span with the description. The XHTML strict validation seems to like it:

Lorem ipsum dolor sit amet, ...
description
hendrerit in vulputate ...



Anonymous

I like C, but how can you wrap the caption text so that the caption is not wider than the image itself? The only thing I can think of is to use an inline style to set the width of the <dl> element to equal the width of the image, something like <dl class=”floatimg” style=”width:155px”>. But that’s just ugly, isn’t it?

Tom → www.tomjleeds.com

I’d probably do:

Caption

Although I probably wouldn’t be correct.

Tom → www.tomjleeds.com

Correction (forgot the code tag):

Caption

Mike → www.fiftyfoureleven.com

For comment #50, I believe that you have to set a width as the dl is floated.

What I found was I had made a dl class with a width for each of tall and skinny and short and wide, and set the class accordingly.

Jim Dabell → www.jimdabell.com/

Shaun,

Generated content has been working in Gecko-based browsers for ages now. It works in Opera and KHTML too. For instance:

img:after {
content: attr(alt);
}

Morgan Roderick → roderick.dk

"Generated content has been working in Gecko-based browsers for ages now."

… as does styling of XML, in which you can define your very own tags, that suits whatever you consider good, semantic markup.

… or you could simply create everything in XSL-FO, and suggest to your sites audience that they just run your content through FOP.

My vote is on option B, modified to my personal likings and my customers’ needs. Currently all of my customers need to have their sites available to IE users, so I’m sticking with what works for them, for now.

I’m not trying to step on peoples toes, but why not just stick with what works (reasonably well) now, is well-formed, and can be transformed easily in the future?

ex.

<div class="floatright">
    <img src="someimg.jpg" />
    Image description
</div>


can be transformed into this

<object type="image/jpg" data="someimg.jpg">Image description
</object>


Or whatever becomes relevant in the Future …

just my 2px

Knightking

Personally, I would go with the following:


<p class="floating">
<div>alt text</div>
Description
</p>

In this instance, I see no need for alt text, assumming the description works without the presense of the picture. If not, you could place the additional text in the contained div.

This has the following benefits:
1) Mobile browsers, screen readers, etc. have, if it is well done, no idea that they are not seeing an image, and believe that it is merely another paragraph. Could require skillful writing, but definatly accessable.
2) In this case, these browsers are recieving semantically accurate information, except for a random div in the middle of it.

Of course, it is not perfect. Whenever using any form of FIR, you tend to suffer in the case of images off, CSS on. Of course, most pictures which would have captions tend to have opaque backgrounds, making this relativly easy to avoid.

The biggest problem is that instead of a nice img tag, which contains a small amount of semantisism, you have a div sitting there, which means nothing. However, I don’t know of anything useful that triggers off of image tags besides things such as Google Image search. I would love to know if I was wrong, though.

Kai Kretschmann → www.it-weblog.de/

I realy would like the floating:after css without any further html tags. But what browser does really support this yet? I tried with Mozilla, IE6 and Opera, all of them failed. At least Opera displayed the caption but lost the floating.
Any working example of this for some known browser?

waylman

Like many others here I don’t care to much for A, and here’s why: The br affects layout/design/style (whatever you want to call it). If I wanted to switch stylesheets in the future and, for some strange reason, actualy wanted the caption on the same line as the img or (more likely) above it, A would not easily allow me to do so. Therefore, A is out.

For those who object to images being a list: we all (should) know that a list with one item is completely valid if it makes sence to do so. So a definition list with one item is not poor markup, assuming that it actualy contains a definition. I can see where the caption could be considered a definition of an image. But couldn’t an image be considered the definition in some cases? While this solution may work in some applications I don’t see it for all.

I would be inclined to use some variation of the title attribute and a Pseodo class, but unfortunetly this is to poorly supported by todays browsers. Maybe in the future!

Thus, I would go with B without the extra p around the img as there is not real need for it as others have pointed out quite well.

Gambit → www.aquaba.co.za

I would have to go with C, B dosent make much sense as a few people have said, an image is not a paragraph. I also like the idea of just putting the caption in a paragraph, but then again its not a paragraph.

C is my choice, it makes the most sense to me.

Layla

Yeah, Chris, float does require an explicit width, and if you don’t include this pretty much all of the suggestions above will break in IE for mac.

James McComb

I wouldn’t use option A because it contains <br /> and <br /> is evil.

B is out because neither an image nor a caption is really a paragraph.

I wouldn’t use C because an image is not a term, and a caption is not a definition of an image.

So I guess I’d quit being a web designer.

Michael Suodenjoki → www.suodenjoki.dk

You may want to read my new article on auto captions for images at http://www.suodenjoki.dk/us/articles/addcaption.htm

Amy

I am going to say a for two reasons
1) I just started working with css
2) It just makes since to use the p tag since you are discussing something about the image.

Amy

try this:

.idea
{
border: thin #000;
float:right;
}

—>

=”idea”>
words

Amy

.idea
{
border: dashed #000;
float:right;
}

—>

=”idea”>
words

Amy

.idea
{
border: dashed #000;
float:right;
}

“

=”idea”>
words

Amy

well ok let me put it this way
head tag = border: solid;
float: right

in the division tag place

div class=”idea” style=”position:absolute; left:48px; top:20px; width:78%”>

=”idea”>
words

if this doesnt post right i wont try it again

Doug Baker

Myself, I like C, even though that markup choice has never occured to me. I understand the opposition to this choice because the image is not a term per se, but you can see Douglas Bowman’s comment in Part III: Heading and List for more expansive ways of utilizing <dl>. So I’d say C.

(p.s. thanks for the great forum for debate, Dan!)

Richard@Home → richardathome.no-up.com

How about this for semantically tying the image to it’s caption?

<div class='thumb'>
<img id='image_1'/><label for='image_1'>Image Caption</label>
</div>

Suprisingly, this validates against the XHTML Strict DocType!

David Walker → www.shorewalker.com

The Michael Suodenjoki solution at comment 62 above really appeals: the image’s ALT text is semantically its caption.

Otherwise I’m with PM in commment 42: stick the lot in a styled DIV and use contextual markup for the IMG as required (until the W3C comes up with something appropriate).

Richard@Home → richardathome.no-ip.com

going along with #42…

Whats so bad about using a single cell table with a caption?

Just a thought…

Marko → www.inet.hr/~mdugonji/webdesign/

Previously at SimpleBits: Heading and List - “Clearly, there are uses for definition lists far beyond the traditional term and description.” (W3 specification).

Add one more C…

Joe Clark → joeclark.org/weblogs/

It will exclusively be revealed that not only do I use single-cell tables with the <caption> element for this purpose, I do it so often I have a macro set up in BBEdit.

Of course, I also use the <dl> approach, but I am too much of a piker to know how to float things around a page.

Juan Ulloa → www.juanulloa.com

Isn’t the use of the caption element reserved for datatables? I would hesitate in using a table wiht the caption tag for these purposes.

I personally would go with ‘C’. I guess you can say that an image and it’s caption are a definition list. But in practice I would go with B, minus the

tags…depeding on how my style sheets are set.

mark panay

Having used C and B for different commercial projects. I’m absolutley amazed that I didn’t think of doing the method in post 69. I think thats the one to try for me next. Semantic, valid and simple. Thanks a lot for pointing out the obvious.

Karl

I’ve got a further wrench to throw into the works….

How do you set up one of these elements so one of your users using Contribute can ad the photo with caption as he pleases to the pages?…

Jano → www.hszk.bme.hu/~hj130/

I dont think generating :after with any attribute of the image as content is a good choice. The caption is not a design thing, it is not something that can be left if CSS is not supported well. Think on text browsers! Caption is content and not a meta or alternative element.

Tero

Just came across a strong (IMO) argument against the DIV option (b) in a form of a client who insists on having Mac IE 5 among the supported browsers.

In a floated layout floating DIVs with no width CSS attribute set seem to always have width of 100%. Haven’t been able to go round this.

Almost wants me to go to a two-row TABLE with images/captions. Almost… With single-paragraph captions, option A seems to work with least hassle.

sam

Dispite the fact that the <label> [see comment #69] tag was created for texboxes (and other form elements, I guess) I think it’s the most semantically correct, but not perfect.

<label> seems awful close to <caption> to me.

FataL

First of all, any of options (A, B or C) we can’t put inside paragraph, because it not validates with XHTML doctype. So, these options not universal, because some times authors need to put pictures inside paragraphs.

We only can do this:
<p>Paragraph 1</p>
[option A, B or C]
<p>Paragraph 2</p>
not that:
<p>Paragraph 1 [option A, B or C] Paragraph 1</p>
<p>Paragraph 2</p>

I found some universality and semantic in this markup:
<p>Paragraph 1 <label for="pic1"><img /><span class="caption">Caption 1</span></label> Paragraph 1</p>

Bill Rehm

I’m struggling with this issue right now myself. My problem with C above is that a list of one is not a list. If the W3C spec provided for using <dt> and <dd> outside of <dl>, I’d embrace it.

I tentatively vote for the <label> solution above, but think it unworkable because of the sizing issue for floated divs.

This leads me to a general question: what is the semantic meaning conveyed by <div>?

Anonymous

#81 – I don’t think there is any semantic meaning for a Div – It’s an empty element.

It does seem weird using a DL simply because there is only one thing in the list. However, there doesn’t seem to be a perfect alternative so this is what I go for.

DT would contain the definition term (either the image or its ALT attribute) and the DD would be it’s definition in this case a description

The Label option sounds good but I think it is really meant for form controls (http://www.w3schools.com/tags/tag_label.asp).