Hi all, is it ok to have images in your code not in p tags, I’ve done things this way and passed validations and such all the time. Should all images be in a p tag? if so, why is that?, cheers peeps 
Yes, it is OK, if the text equivalent (the value of the alt attribute) makes sense at that place in the paragraph.
Example 1
<p>If there is a known issue with the service, you will see a
<img src="/img/warning.png" alt="Warning!"> icon
in the upper right-hand corner.</p>
Example 2
<p><img src="/img/alert.png" alt="Notice! This service is temporarily out of order."></p>
If the text equivalent is empty, e.g., for a purely decorative image, it’s better to use a <div>.
Example 3
<div><img src="/img/sunset.jpg" alt=""></div>
Remember: an image is nothing but an alternative representation of the information in the text equivalent (semantically). Therefore an image can be used wherever the corresponding text equivalent can be used.
Tommy, you are da man, so I won’t parse code with you, but I’ve been told that something like this:
[highlight=“HTML 4.01 Strict”]<div><img src=“/img/sunset.jpg” alt=“”></div>
is little more that divititis. And this:
[highlight="HTML 4.01 Strict"]<img src="/img/sunset.jpg" alt="">
validates in W3.
I’ll take your word that you’re right. 
And I understand this part:
Remember: an image is nothing but an alternative representation of the information in the text equivalent (semantically). Therefore an image can be used wherever the corresponding text equivalent can be used.
But if you would, tell me why you need that empty div.
Off Topic:
from Mrs. Max
If a block level element is adjacent to an image element, then a block level element needs to encapsulate the image. As previously stated by Tommy; if the image text equivalent constitutes a paragraph, then a <p> best suites the job.
Essentially, in a real world situation, a division would likely be the relied upon element for the job.
Now I’m just playing devil’s advocate
If the image element needs to be defined as a block, what’s the rationale against doing this?
.blockimg {
display: block;
}
[highlight=“HTML Strict”]<img class=“blockimg” src=“/img/sunset.jpg” alt=“”>
Not being argumentative, this kind of back-and-forth is how I learn things. (:Thanks, Cooper. I remember that thread now that you bring it back to my attention.
I think if the image relates to text in a specific paragraph then it makes perfect semantic sense to include the image within that <p>. An illustrated ‘how-to’ might be a good example where this would make sense.
On the other hand, if the image is about all (or none) of the nearby paragraphs – for instance, illustrations in a children’s novel – putting it inside one paragraph probably implies something you don’t really want to.
No, it doesn’t. Not with a Strict DTD (which is what everyone uses these days, right? Right?!). Not if it’s an immediate child of <body> (or a form, or a blockquote, etc.).
And if it’s surrounded by block-level children, then the image should be wrapped inside a block-level container. Anything else is just semantically weird. And if the image is used in-line, then it should be wrapped in a block, of course. As I showed in my first example in this thread.
The same rationale as this one: writing blue doesn’t change the meaning of the word from blue to red (semantics). It just affects the way it looks (presentation).
Off Topic:
to Mrs. Max
Just noticed I’d got this bit ar$e backwards. It should be,
And if the image is used in-line, then it should not be wrapped in a block, of course.
picture is ok in code.
If something is purely decorative (with no alt text), it’s usually better to have it in there using a CSS background property.
Urgh, I knew this. :wacko:
Not having alt text doesn’t mean the img is necessarily only decorative.
I agree and there is sometimes an advantage is having it as an image rather than in the CSS.
I should point out (as I’ve mentioned a number of times before) that irrespective of all the above browsers don’t actually like inline elements running into block elements in certain circumstances. I have seen last week in the forums 2 sites broken in Firefox 3.5 because of this and loads broken in IE over the last few months.
It’s a more common problem than you think and a good reason to structure your code correctly as Tommy has shown above.
Remember also that if you have an inline element hanging there and you start a float immediately after then the inline element will be moved to make way for the float (unlike a block element which push the float to the next line).
In CSS-compliant browsers, yes. But buggy browsers like IE and Firefox don’t do that, but push the float down instead.
Yes IE7 and under and Firefox 3 and under exhibit that behavior. Firefox 3.5 and IE8 are ok though
Essentially, in a real world situation, a division would likely be the relied upon element for the job.
Although that is better than the alternative of not wrapping the image in anything I still don’t like that method
A div is an element for dividing your page into sections or for using when there is no other suitable element.
If you have an image in your page then it is saying something to your visitor. When you say something the text goes in a paragraph so I think a p element is usually the best element to use for images and also save a few bytes along the way. A picture is worth a thousand words and as we know words go in paragraphs.
At least that’s my take on it but I know others think differently:)