Should I put paragraph tags around images?

I have a web page where I have text with images. I write some text (in a paragraph) then put an image, then another paragraph.

Should I put p tags around the image too, or should I just leave it in between with just the img tag?

The reason I ask this is because up until now I was just plopping images in between paragraphs, but now if I want to add more than one image or add an image and an anchor then the don't sit together right. The other thing I tried was adding

<p></p>

in between two images but I feel like that i开发者_运维百科s wrong :P

You could use CSS to make the images act as blocks rather than as inline-blocks:

Put the following in your CSS somewhere:

img { display: block; }

Or if you have some images that you want to display inline, then add class="block" to your img tags, and change the css to this:

img.block { display: block; }

Styling an image as a block element is a partial solution. HTML should be designed to "work" without styles also. If the box model requires that a block element contains only block or inline elements - not mixed - than we should do so on the lowest possible level. This is why menus are created as lists not sets of links. This is called graceful degradation.

So IMHO the <p> tag around the image should be added if the nodes next to it are block elements.

I can't think of any reason why you wouldn't use <p><img/></p> if that's how you want it laid out. that way the mark up clearly describes the layout.

it is certainly more legible than changing the display type for all images. the best alternative would be to create a css class img.block {display:block;} + <img class="block"/>

There's nothing wrong in having the images with or without <p></p>. The only things you should keep in mind are:

1. The CSS for <p> might affect the padding, margin or width of the image in a way that you don't want it to.
2. <p> will make the image display as block.
3. If that's your only purpose, I would suggest that you include that rule in your CSS as img {display: block;} and leave your <img> appear without <p></p>
4. If images on your site will be a mix of block elements and inline elements, I would recommend creating a class for each and specify img {display: block;} and img {display: inline;}