Enclosing <img> in <p>?

**drtanz** · Oct 23, 2009 15:30

Which code is the most semantically correct?

This

Code:

<div>
<img>MY IMAGE HERE</img>
<p>MY PARAGRAPH HERE<p>
</div>

or this?

Code:

<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

**AlexDawson** · Oct 23, 2009 15:42

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

**drtanz** · Oct 23, 2009 15:47

hehe yeah oversight there with the closing img tag

back to figuring out how to remove that p tag then

**AlexDawson** · Oct 23, 2009 16:01

Originally Posted by drtanz

back to figuring out how to remove that p tag then

Why do you wan't to remove the paragraph tag?

**drtanz** · Oct 23, 2009 16:02

because its enclosing my <img> and messing up some of my design

**ralph.m** · Oct 23, 2009 16:06

Originally Posted by drtanz

back to figuring out how to remove that p tag then

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.

**drtanz** · Oct 23, 2009 16:08

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

**ralph.m** · Oct 23, 2009 16:15

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.

**felgall** · Oct 23, 2009 17:44

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.

**gary.turner** · Oct 23, 2009 18:01

I, on the third hand, tend to wrap images in p tags for the reason Stephen mentioned.

cheers,

gary

**Paul O'B** · Oct 24, 2009 09:12

<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:

Code:

<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.

Code:

<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.

Code:

<div> 
    <p><img src="".... /></p>
    <p>well structured section</p>
</div>

Although I agree that this is also acceptable but not my preferred method.

Code:

<div> 
    <div><img src="".... /></div>
    <p>well structured section</p>
</div>

**drtanz** · Oct 24, 2009 10:03

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

**JasonCurran** · Oct 24, 2009 10:07

I used to prefer not to wrap my IMG tags with extra tags but Paul O'B convinced me!

**ralph.m** · Oct 24, 2009 16:08

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:

Code:

<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!

**drtanz** · Oct 25, 2009 03:04

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>

**Paul O'B** · Oct 25, 2009 03:22

Yes that would be fine

**cooper.semantics** · Oct 26, 2009 20:47

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.)

**fxtradingzone** · Nov 6, 2009 05:54

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>

**Stomme poes** · Nov 9, 2009 02:35

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.

**zcorpan** · Nov 9, 2009 06:12

Originally Posted by Stomme poes

If it's illegal to have inlines and blocks as siblings then I sure would like the W3C to make that rule.

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.

**Stomme poes** · Nov 9, 2009 07:28

^interesting.

*edit now I'm curious, how would dropdowns work?

Usually we have <li><a href="#">some anchor</a> and then a sibling <ul> stuff inside</ul></li> and now we should be having issues. Or not?

I'm someone who prefers a One True Way and very strict rules, maybe because I am someone who is easily confused.

Hmm, maybe I should go do Java : (

**zcorpan** · Nov 10, 2009 06:45

When HTML5 did this, it used complex rules that no-one understood where <ul> was a so-called structured inline element which was considered an inline element (for the purposes of content models) when there were other content in the same parent that could only be considered inline (such as text or <span>), and was otherwise considered a block element.

**rguy84** · Nov 11, 2009 11:46

I'd just like to commenty on what Felgall said in post #9. There is an attribute called alt. The alt attribute is required by the w3c to be valid code. The text inside the alt attribute is what screen readers read to users when they come across an image, so this text should only be about a sentence long. IF you need to provide a longer description of an image you use the longdesc attribute, where you provide a link to preferabily a text file, where you can go for broke.

One thing I do is:

Code:

<div> //usually floated/styled
 <p><img src="" alt=""/></p>
 <p>Above: [my paragraph]</p>
</div>

This is valid code, it tells the screen reader to essentially skip that there is an image and read the text below it.

**Stomme poes** · Nov 11, 2009 13:10

Yeah my screen reader skips the image unless the image is in an anchor (then it says Link graphic and if there's no other text it reads out the url). But usually (not always) an image with an empty alt attribute belongs in the CSS in the first place.

Except obviously when you need a floated image so text wraps around.

That said, there's no reason not to

Code:

<div> //usually floated/styled
 <p><img src="" alt=""/> Plain ol tekst</p>
</div>

There, the inline image is together with all the anonymous inline boxes of the block p, and passes Paul's perilous pedantic... can't think of a word that means "rules" that starts with a p... paradigm? Lawlz.