align="right" or class="alignright" ?

[adesignrsa]

Is it better to code like so:

<img src="file.jpg" alt="blah" title="blah" class="alignright" />

...and have a class in the css file that aligns it right, and pads it, styles it etc accordingly.

or:

<img src="file.jpg" alt="blah" title="blah" align="right" hspace="10" vspace="10" />

They both validate, and the latter option displays better when your content is syndicated as it's likely not connected to the stylesheet in your reader (well, $100 says it's not ).

What do you reckon, oh wise and worldly SP gurus?

[RetroNetro]

I go with option #1, that way the .aright (or .aleft) class can be used over and over on any element.

[adesignrsa]

But then viewing that element in a feed reader for instance, the image will be inline like a character of text... looks poorly formatted.

Am I wrong in stating that this is a little presentational faux pas/oversight in the web standards move from presentational markup to standards compliant code?

[AutisticCuckoo]

Yes. Content and presentation should be kept separate.

If it's important to you that the image is floated to the right in a feed reader, you can use inline CSS (style="float:right"). It's no better than the presentational attribute, which is deprecated, from a best practice point of view, but at least it's valid. The align attribute is deprecated and won't validate with a Strict doctype, which is what you should use for all new pages.

[adesignrsa]

It passes a transitional one though. But I guess that name explains it all.

You're right though, I'll use the inline CSS equivalent then.

I think in this situation it makes more sense to use inline styling than an external stylesheet since IMO, it is poorly formatted in a feed reader if the context reads "in the image on the right..." and then it's sitting above or below the text.

[c.t.c.]

External CSS is also much easier to maintain than inline CSS and presentational HTML. If you need to change the presentation of all your images in the future, you can do so by editing only one line in a CSS file rather than every individual img element.

Depending on how you create your feed, you may want to use external CSS in your web page and inline CSS in your feed.

[felgall]

The second version will only validate with a transitional doctype since all the positional attributes are deprecated and should no longer be used.

[AutisticCuckoo]

IMO, it is poorly formatted in a feed reader if the context reads "in the image on the right..." and then it's sitting above or below the text.

That's why you shouldn't write things like 'the image on the right' if it's not really to the right of that text.

[C. Ankerstjerne]

Regarding the original question, both are equally bad, in their own way. Using align="right" is deprecated, and therefore shouldn't be used, but using class="alignright" or style="align:right" is also a poor solution. By doing this, you are still not separating contents from layout, you're just using a different technology to do the same as you would have done in the past.

CSS classes and ids should always be named according to their use, never according to how you want it to look right now. If you at some point want to change the image to be left-aligned, you will either have to change the class in the document, or change a class called alignright to aling things left, which will only confuse upon future updates.

The solution would be to name the class e.g. articleimage, or something else which describes what the image actually is. If you need some variation, you can apply a secondary class.


Regarding references to images, making absolute references in the text to an image's location on the screen is a bad idea. There are a number of different factors which can change the appearence, including user-defined style sheets, text-based browsers and (perhaps most importantly) screen readers. If a user can't see the image, referencing a location only obvious to users who can see the image will make it a lot more difficult to get the context.

Why not use the method used in scientific articles, and reference figure numbers?

<p>
  A recent poll showed that the number of polls has seen
  a significant increase during the last five years. As seen
  in <a href="#polltrend" id="polltrendback">figure 1</a>,
  the number of polls in 2010 is expected to double from
  the 2008 estimate.</p>
 
<dl class="articleimage">
  <dt>
    <img src="images/polltrend.png" width="300" height="200"
      alt="Number of polls from 2003 to 2008, with projection
      for 2010. 2003: 100. 2004: 120. 2005: 150. 2006: 190.
      2007: 220. 2008: 280 (estimated). 2010: 560
      (projected)." id="polltrend">
    <a href="#polltrendback" class="documentreturn">Back</a>
  </dt>
    <dd>
      Figure 1: Polls are estimated to double from 2008 to
      2010.
    </dd>
</dl>

[antitoxic]

Pretty curious is there any problems with external css in feeds that impose using inline styling ? And if feeds than make one rule for them all ? Float them all to the right.

[mujuu]

I just can use "style" tag on HTML codes form. It doesn't make any different actually

[Stomme poes]

antitoxic:
I dunno bout no feedz, but in general an external stylesheet is always overridden by internal ones, who are always overridden by inline ones. Inline is the safest when you have to toss your HTML into the wild blue yonder, in an email, or onto someone else's page.

Using figures to name images is nice, but usually even journalistically you can still get away with "above" (or "above referenced") and "below" since that still works linearly. It's almost become a language phrase so that, if I'm reading a two-column article and they say "the graph below" and it's really next to that text because it's in the next column is still fine, as readers have learned over the century that "below" means "later in the text" regardless of where it's phycially sitting.