In XHTML 1.1, are <div> tags allowed inside of <p> tags?

Search for the truth: <div> Tags Inside of <p> Tags

[cmarshall]

There's a reason for this: [C]WAP likes <p> tags. For this reason, I will use <p> tags to format XHTML pages that are meant to be repurposed for cell phones. I will often use <p> where you would normally use <div>.

Now, the rub:

IE (any version -including 7-) will not allow this:

<p id="p_tag">To be Replaced</p>

<script type="text/javascript">
//<![CDATA[
document.getElementById('p_tag').innerHTML='Will work in IE'.
document.getElementById('p_tag').innerHTML='<div>Will not work in IE</div>'.
//]]>
</script>

In any (and I mean ANY) non-IE browser, you would see "Will not work in IE" displayed. However, on IE, you will see "Will work in IE".

This is IE Windows. IE Mac works properly (go figure).

Now, I've checked the W3C site, and can see no prohibitions on placing <div> tags inside of <p> tags.

However, I'm not particularly good at reading the darn specs, so there is every chance that I have missed it.

Does anyone have the skinny?

I'm pretty sure this is an IE bug, but IE is an 800-pound gorilla, and it won't be the first bug I've had to grin and bear.

If it is a bug, does anyone have a workaround?

[encyclo]

I'll have to dig out the precise specifications on this, but basically a

p

can never enclose a

div

in HTML (or XHTML served with the mime type

text/html

). If you are serving XHTML with an XML mime type, you can do this in theory, but the result would not be valid XHTML.

When dealing with HTML or HTML-compatible XHTML, then the closing

</p>

is optional, so the paragraph is always automatically closed when the parser encounters another block-level element.

[icantthinkofone]

<div> tags are not allowed inside <p> elements. Div tags contain block level elements while p tags contain inline elements.
You should not be using xhtml1.1 anyway unless you are serving it as application/xhtml+xml, which I doubt. You are probably serving it as text/html. Switch to xhtml1 or, preferably, html4.01 strict.

[penders]

The HTML4.01 spec states:

The P element represents a paragraph. It cannot contain block-level elements (including P itself).

Why would XHTML be any different in this respect?

I can't see that a p-tag can be a replacement for a div-tag?

If you are serving XHTML with an XML mime type....

But if you are using true XHTML, you wouldn't be able to use innerHTML (would you?) - you would need to use the DOM methods... createElement(), appendChild() etc.

IE6 (and IE5 Win) actually report "Unknown runtime error" trying to execute that 2nd .innerHTML (not sure why?)

Have you tried putting <div> tags inside your p_tag to begin with?

<p id="p_tag"><div>To be Replaced</div></p>

Slightly strange result in that "To be Replaced" is not replaced, it is added to (in all browsers).

To perform your original task of replacing the text with "<div>Sometext</div>" using the DOM, which I assume you would need for XHTML, then this works: (in FF, Opera AND IE6!)

var myp = document.getElementById('p_tag'); 
var newdiv = document.createElement('div'); 
var mytxt = document.createTextNode('This does work - but is it valid?!'); 
newdiv.appendChild(mytxt); 
myp.replaceChild(newdiv,myp.firstChild);

Although I question whether this is valid.

[SuzyUK]

.. had the following page open before encyclo replied, then had to go out, this is the corresponding rec.

[w3.org...]

The P element represents a paragraph. It cannot contain block-level elements (including P itself).

[cmarshall]

Yeah, I read that stuff in the HTML 401 spec, but I wasn't sure if it applied to XHTML 1.X. As Alex Baldwin said in Beetlejuice: "The XHTML spec reads like stereo instructions."

I may have a bit of a workaround, but I'm not too happy with it.

You see, the only place I need to do this is in the administration interface. I don't want to hose up the entire site so some login-only stuff can get done. Practically speaking, I'm better off disallowing IE in the admin. interface than I am screwing up every single visitor to my site, or rewriting everything.

I'll try that "is it evil?" workaround first.

Thanks!

[penders]

[C]WAP likes <p> tags...

Just curious (I haven't a clue about [C]WAP)... it what way does it 'like' <p> tags and presumably 'not like' <div> tags?

[cmarshall]

Sorry. My joke.

WAP == WML (as opposed to XHTML-MP, which likes <div> tags).

I'd link to the standard if they let me.

[cmarshall]

Oh yeah, one other thing.

I do detect whether the browser can accept text/xml, and feed it that.

[Wlauzon]

Div tags are not allowed in ANY block element tag, which includes <p>.

[cmarshall]

Div tags are not allowed in ANY block element tag, which includes <p>.

I figured that, but I wanted to find out where the standard says it, and why my pages pass every validator out there. There are a heck of a lot of HTML "urban legends" out there, and the obtuseness of the standard doesn't help clarify it.

Remember that XHTML 1.1 introduces a new "modular" structure to HTML, and that flexible block-level elements may well fit into this schema.

In the meantime, I'll explore alternatives, but I don't see many viable ones. I may switch <div> and <p> tags for the admin interface (using "generic" classes), but that seems like an awful lot of work for a one-time issue.

[bedlam]

Div tags are not allowed in ANY block element tag, which includes <p>.

Incorrect--at least in html 4.01/xhtml 1.0.

The situation is much more nuanced, and many block level elements may contain div elements (including li, dd, td, th, div itself). To illustrate the point only for xhtml 1.0 strict, observe the following:

• block level elements [w3.org] consist of "p ¦ %heading; ¦ div ¦ %lists; ¦ %blocktext; ¦ fieldset ¦ table"
  
• p [w3.org] may only contain inline elements [w3.org]
  
• %heading [w3.org] such as h1 [w3.org] may also only contain inline [w3.org] elements,
  
• div [w3.org] may contain flow [w3.org] which includes all block [w3.org] elements,
  
• %lists [w3.org], or more specifically list items [w3.org] and definitions [w3.org] may contain flow [w3.org] (which, as mentioned, includes all block [w3.org]),
  
• %blocktext [w3.org] may not contain block [w3.org],
  
• fieldset [w3.org] may contain block [w3.org],
  
• and table [w3.org] (actually td and th) may contain flow [w3.org] and therefore all block [w3.org].
  

The situation seems similar in xhtml 1.1 [minerva.dce.harvard.edu], though I haven't looked deeply enough into it to be sure. There's still no particular need to use xhtml 1.1 for any but the most specialized needs as far as I can determine.

-b

[cmarshall]

Thanks! That was what I was looking for!

You can't get more official than the DTD.

Now, why do the validators pass my code?

[cmarshall]

I Like the XHTML 1.1 [minerva.dce.harvard.edu] explanation.

In any case, I stand corrected. I need to figure out the best way to deal with this. I am considering removing the <div> enclosures for my admin content. I may not need them.

According to the standard, <p> can handle form elements, just not the form itself.

[penders]

[C]WAP

lol! Thanks for info cmarshall(!) - dang, just goes to show I'm on acronym overload! (But yeah, I don't know much about WAP either!)

(Good post bedlam)

[cmarshall]

Problem Solved.

Rather than rewrite the whole schmeel, I just removed the <div> wrappers from the <form> elements I was inserting.

Makes it a bit more awkward, but not much.

Thanks for all the feedback. I can always count on this place.