p tag not containing ul tag

Question

I was just working on creating a simple address container and what I had in my HTML was just the following simple markup:

<p class="address">
    <ul>
        <li>hello</li>
        <li>hello</li>
        <li>hello</li>
    </ul>
</p>

and the following CSS:

.address {
    -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.5);
    box-shadow: 1px 1px 1px rgba(0,0,0,.5);
}

Now somehow the <p> element does not contain the ul and neither is the box-shadow applied to the p tag , but when I replace the p tag with a div tag, everything works find. The div contains the ul (as can be seen in the inspect elements) and also the div has a box-shadow. I have checked this in both FF and Chrome and have no idea of why is this glitch occurring.

For your reference `http://stackoverflow.com/questions/5681481/should-ol-ul-be-inside-p-or-outside`. Consider using `div` istead. — Justin George, May 14 '15 at 06:05
@AlexanderSolonik i dont understand what you mean by that. assuming address is just a text, it doesnt have to be included in`
` as must. — Justin George, May 14 '15 at 06:10
@MrLister , this article http://html5doctor.com/the-address-element/ and this doc https://developer.mozilla.org/en-US/docs/Web/HTML/Element/address says use
whenever address is not relevant ! — Alexander Solonik, May 14 '15 at 06:10
Anyway, to answer the technicalities, the `` end tag is _optional_, so what happens when the parser sees the `
` it knows that the `
` should end. And it does! So the `
` is completely empty and that's why it doesn't get drawn. No margins, no shadow. — Mr Lister, May 14 '15 at 06:12
@AlexanderSolonik Those pages describe the `
` element, which is not applicable in this case. You're not using `
` elements. — Mr Lister, May 14 '15 at 06:15
@MrLister Thanks ! i guess that answers my question and yeah ! i am not useing address , but if you cheeck the links i added , it says "use p" where address is not applicable ! — Alexander Solonik, May 14 '15 at 06:18
You _can_ use a `
` if you want, you just can't put an `
` inside it. So if you really need the `
`, you can't use the `
`. If you really need the `
`, you can't use the `
`. — Mr Lister, May 14 '15 at 06:23

score 4 · Accepted Answer · edited May 23 '17 at 11:45

4

Please see the answer from a similar question: List of HTML5 elements that can be nested inside P element?

Only phrasing content can be in between the <p> tag and is described as follows:

Phrasing content is the text of the document, as well as elements that mark up that text at the intra-paragraph level. Runs of phrasing content form paragraphs.

edited May 23 '17 at 11:45

Community

1
1

answered May 14 '15 at 06:05

Michael Sanchez

1,215
1
11
19

+1 for being the only answer that says "can" instead of "should". "Should" doesn't imply that it is literally impossible for a p to contain a ul or any other flow content; "can" does. – BoltClock May 14 '15 at 06:09
@BoltClock - of course, that's only a limitation of the HTML parser. It doesn't apply to the XML parser or to DOM methods. – Alohci May 14 '15 at 07:13
@Alohci: As evidenced by the newest answer. Well I'll be - I was under the impression that this limitation applied to DOM methods as well. – BoltClock May 14 '15 at 07:14

score 0 · Answer 2 · answered May 14 '15 at 06:22

0

ul elements are not legally allowed inside p element.

Reference : http://www.w3.org/TR/html5/grouping-content.html#the-p-element

answered May 14 '15 at 06:22

Harsha Biyani

7,049
9
37
61

1

"Legally" isn't really a term most people use when discussing HTML standards? – codyogden May 14 '15 at 06:36
1

@codyogden - True, although the HTML 4.01 spec uses some variant of "legal" 40 times to describe validity requirements. For example, [boolean attributes](http://www.w3.org/TR/html4/intro/sgmltut.html#h-3.3.4.2) – Alohci May 14 '15 at 06:55

Himesh Aadeshara · Answer 3 · 2015-05-14T07:02:42.947

$("p").append("<ul>        <li>hello</li>        <li>hello</li>        <li>hello</li>    </ul>");

.address {
    -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.5);
    box-shadow: 1px 1px 1px rgba(0,0,0,.5);
}

<html>
<head>
<title>Test</title>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p class="address">
</p>
</body>
</html>

**it's strange behave that you can do this thing by java script As append tag to

tag using jQuery Or java script This will works **

it may issue with rendering time it also strange behave with IE browser. try out this thing ing IE browser also.

score -3 · Answer 4 · answered May 14 '15 at 06:18

-3

Even though you kept ul inside P its not rendering as you think in the browser. Please see the below screenshot for reference enter image description here

answered May 14 '15 at 06:18

Jayababu

1,641
1
14
30

as per link http://www.w3.org/TR/html5/grouping-content.html#the-p-element we should not keep ul as nested inside p – Jayababu May 14 '15 at 06:23

p tag not containing ul tag

4 Answers4