In a perfect world, all the graphics and layout are defined in stylesheets - but not src? Shouldn't be?

Question

The purpose of CSS is to help web developers to define and apply graphics and layout, separated from the actual content.

However, it seems like CSS can tweak pretty much anything (graphics wise) on a website - apart from the source attribute of an <img>-tag.

To achieve 100% separation between style and content (which we all want, right?) shouldn't we define image sources in the CSS as well?

I know that CSS can't do this (no support of changing src-attribute for images) but there are work-arounds, such as using <div> with backgrounds instead of <img>. However, by doing that, won't it break search engines?

My question is. Is using instead of <img> to achive 100% separation between style and content a reasonable action?

Actually, you *can* change `` content with CSS: http://jsfiddle.net/r3pFn/ — Wesley Murch, Jan 18 '12 at 22:27

score 14 · Accepted Answer · answered Jan 18 '12 at 16:45

14

<img /> tags are intended to be content, not style.
<img /> is supposed to be used for something like a photo accompanying an article.

UI graphics should be done using CSS backgrounds.

answered Jan 18 '12 at 16:45

SLaks

868,454
176
1,908
1,964

3

I would add that any "style" done with `` is wrong and should be done with css. – cdeszaq Jan 18 '12 at 16:46
As SLaks mentioned, is for content not layout and should be separated as so. Any images that are used for layout should be held in a
background.
– zethus Jan 18 '12 at 20:39

score 2 · Answer 2 · answered Jan 18 '12 at 16:47

2

An image is content - e.g. diagrams. Style is just to make the page pretty but adds nothing to the content (syntax/semantics) of the document.

answered Jan 18 '12 at 16:47

Ed Heal

59,252
17
87
127

score 1 · Answer 3 · answered Jan 18 '12 at 16:45

1

Sometimes images are content and not just style... and that's when you use an img tag.

answered Jan 18 '12 at 16:45

canon

40,609
10
73
97

Images should _always_ be content and not style. – MetalFrog Jan 18 '12 at 16:48
Like an icon to signify that it's an external link? It's merely a style, adding no content, and should be CSS. – MetalFrog Jan 18 '12 at 16:52
That's rather pedantic, isn't it? You didn't know that when I said "Images" that I meant "images inserted into the page through the use of img tags?" Silly. – MetalFrog Jan 18 '12 at 16:58

score 1 · Answer 4 · answered Jan 18 '12 at 16:45

1

Images can very well be part of the content.

answered Jan 18 '12 at 16:45

Dennis Traub

50,557
7
93
108

score 1 · Answer 5 · answered Jan 18 '12 at 16:46

1

Images that are part of the UI should be defined in CSS where possible.

Images that are part of content should be inline img tags.

answered Jan 18 '12 at 16:46

Diodeus - James MacFarlane

112,730
33
157
176

score 1 · Answer 6 · answered Jan 18 '12 at 16:48

It depends when. Sometimes the images are content and not style. Therefore you can use div's with css backgrounds if it's purely for style but use the tag when you want to show a content image.

Then you will truly have a 100% content/style separation.

In a perfect world, all the graphics and layout are defined in stylesheets - but not src? Shouldn't be?

6 Answers6