Which code is the most semantically correct?
This
<div>
<img>MY IMAGE HERE</img>
<p>MY PARAGRAPH HERE<p>
</div>
or this?
<div>
<p><img>MY IMAGE HERE</img><p>
<p>MY PARAGRAPH HERE<p>
</div>
Wordpress is surrounding my <img> tags automatically with <p> tags and therefore I would like to know whether this is something good or not? thanks
Technically both as their contained within block level elements, though your IMG element is incorrect on the basis that images don’t have closing tags or text inside 
hehe yeah oversight there with the closing img tag 
back to figuring out how to remove that p tag then
Why do you wan’t to remove the paragraph tag? 
because its enclosing my <img> and messing up some of my design
You can modify that sort of behavior by digging into the bowels of WordPress.
Have a look at wp-includes > post-template.php line 944ff. I think that’s where this rule is applied.
thanks, trying to find a suitable plugin if possible as i would prefer not to modify core code that might be updated later and nullify my changes
Indeed, I was just about to edit the post and say that this sort of change plays havoc with updates, so I never make changes like this outside the theme folder.
But really, I’d say the easiest solution–if you don’t like the way the pages are rendering–is to tweak your CSS. You should be able to get your images to render any way you like via the stylesheet.
An image by itself isn’t really a paragraph but the alternate text that some people will see instead of the image probably is and so you could probably justify treating an image as a paragraph on that basis.
I tend to wrap images in div tags when needed rather than paragraph tags.
I, on the third hand, tend to wrap images in p tags for the reason Stephen mentioned.
cheers,
gary
<div>
<img src=“” />
<p>MY PARAGRAPH HERE<p>
</div>
This is a pet hate of mine and if you use the above structure you are in effect saying this:
<div>
I'm a
<p>badly structured section</p>
</div>
Note that the above code will validate but it is not semantically correct.
Neither is the following acceptable.
<div>
<span>I'm a</span>
<p>badly structured section</p>
</div>
In both the above cases you have inline elements running straight into block level elements and the browser has to step in and create an anonymous block box so that the structure is correct.
Any time you make the browser think then you are asking for trouble in IE and indeed the half finished structure causes many bugs that I see time and time again in the forums and results in missing or misplaced content.
Therefore I always try to ensure that all inline elements are on the same level as other inline elements and that they are contained within a block element before another block element starts.
I prefer to wrap images in paragraph elements because most of the time it makes sense to me and I hate wasting the four extra characters that a div takes. (I see divs as divisions of content rather than containers for individual items although I accept that at times there is no choice.)
If an image in the html then that means it’s important content and saying something to the visitor. When you say something you use paragraphs.
Therefore to avoid bugs in IE and also to be semantically correct I would do this.
<div>
<p><img src="".... /></p>
<p>well structured section</p>
</div>
Although I agree that this is also acceptable but not my preferred method.
<div>
<div><img src="".... /></div>
<p>well structured section</p>
</div>
perfect explanation Paul, wasn’t aware of this, turns out I was being the bad boy not wordpress then thanks again for your patience in explaining
I used to prefer not to wrap my IMG tags with extra tags but Paul O’B convinced me!
Hmm, I’ve been known to wrap the image in an <a> tag and set it to display: block, but I’ll rethink that now:
<div>
<a><img src="".... /></a>
<p>well structured section</p>
</div>
I can see why it would be better to wrap the <a> in <p> tags. Interesting discussion!
Just to make sure I’m getting this right, this would be a correct statement then?
<p>Here is the red pill <img src=“red_pill.gif” /></p>
Yes that would be fine
I prefer to wrap images in paragraph elements because most of the time it makes sense to me and I hate wasting the four extra characters that a div takes. (I see divs as divisions of content rather than containers for individual items although I accept that at times there is no choice.)
:tup:
Below code is not correct, there is minor mistake.
<div>
<p><img>MY IMAGE HERE</img><p>
<p>MY PARAGRAPH HERE<p>
</div>
It should be written as below
<div>
<p><img src=“MY IMAGE HERE path” /></p>
<p>MY PARAGRAPH HERE</p>
</div>
Hmm, I’ve been known to wrap the image in an <a> tag and set it to display: block, but I’ll rethink that now:
I do that all the time. If it’s illegal to have inlines and blocks as siblings then I sure would like the W3C to make that rule. After all, they change the rules to make Mozilla happy, so no reason not to do this too
For me I guess it wouldn’t matter if I used <div> or <p> because if I’m wrapping an image, I’m usually floating it anyway, so then the p is required to have a class or id on it because I can’t just float img because the block of the p stops all the cool text wrapping I want. So it’s a bunch of extra characters in any case.
Actually it was a rule in HTML5 before, but that was later changed to allow inline and block as siblings, because most people do that and get confused when it’s suddenly not allowed and it also doesn’t really cause a technical problem to mix them.