presentational images without <img>

[wbtenor]

I'm probably getting WAY too much into the zen of CSS here, but I'd like to get the site I'm working on to have no <img> tags in the xhtml unless they are content. I'm already successfully replacing text with background-attachments, like the header and some list items.

The thing I'm curious about is with artwork or pictures to "pretty up" the design, but have no meaning in terms of content. Something like a body of text with a floated image to break up the monotony of text, but doesn't really serve as content.

How do you guys handle this? I could create an empty span or something and add the image through the CSS that way, but that adds extra markup. Advice?

[mmj]

You could, if you wanted, create a div that is the same size as the image, and set the div's background property:

div#myimage
{
  background: url(/images/myimage.png);
}

However, you could just use an <img> element with and empty alt attribute:

<img src="/images/myimage.png" alt="" />

In terms of markup, using an image with an empty alt attribute means "There is an image there, but it has no meaning in context", whereas using a background image means "There's no image, it's just a div, which is meaningless".

[Paul O'B]

Hi,

I prefer to put decoration images in the background as they are easier to change through the stylesheet as presentation should be separated from content where possible.

An empty div as Tom said is meaningless but I thinks it preferable to have the image in the stylesheet so that it can be changed easily at a later date. In some cases you may be able to utilise existing elements to add your elements anyway.

If you wish to implement a styleswitcher or change your site regularly then background images are a necessity.

[wbtenor]

So, as an example...if you had an article with 3 paragraphs of text, and wanted in image floated to the left of the 3rd paragraph, would you then wrap a <div> around the last <p>, or place it inside it? Thanks very much for the help so far...I'm learning a lot.

[Paul O'B]

Hi,

Well if the image is floated alongside text then it would suggest to me that it is more than decoration and should be in the html as an image and just set to float inside the paragraph it refers to.

If the image is nothing but an unrelated pretty picture of no consequence then you can use an empty element and float it alongside the text. Of course if you want the text alongside the image then the image must be floated before the text (in the html ). Therefore you could have an empty span that starts just inside the p which will do the job.

(Remember that you can't put divs inside a paragraph because that's against the rules.)

If the image doesn't need to be floated then you could put it in the background of a p tag and add some padding left for the text to clear (But of course it won't wrap under this way).

You will need to decide if the image is content or presentation and then make your decision accordingly. It isn't bad to have images in the html as they can be regarded as content when they are important to the meaning of the page. It looks to me as though your image should be in the html because you are placing alongside some text which surely means its a relevant image. If it were just a gradient background or some eye candy then it can go in the css.

Sorry if that sounds a bit confusing

[wbtenor]

Not confusing...it makes perfect sense. Thanks for the clear explanation. I'm trying to convert a site, and the instances I'm talking about are definitely eye candy. It's a chldren's site, an there are lots of little images that are either floated left or right of the paragraphs to keep it visually appealing, but the images have nothing to do with the content.