Nesting a
within a
creates two paragraphs. Why?

Question

I've noticed a strange behaviour in how the browsers interpret the following code:

  <h2>Maecenas aliquet lorem id urna vehicula</h2>
  <p>&nbsp;
    <ul class="liststyle">
      <li>Curabitur</li>
      <li>Pharetra</li>
      <li>Convallis</li>
    </ul>
  </p>

When I tried to give this some style I tried the following selector:

p li {
  font-family: Verdana, sans-serif;
  font-size: 14px;
}

I know that a better choice is "ul li" but my selector (p li) should work and it doesn't, so looking the developer tools in Chrome and Firefox this is how they interpret the code:

<p>
</p>
<ul class="liststyle">
    <li>Curabitur</li>
    <li>Pharetra</li>
    <li>Convallis</li>
</ul>
<p></p>

The only difference is that Chrome also shows the entity ( ) that I put there trying to fix the problem, but still creates two paragraphs. I'm looking for an explanation of this phenomena. Thanks.

Your answer can be found here: http://stackoverflow.com/questions/7168723/unordered-list-in-a-paragraph-element — Dan Orlovsky, Mar 24 '15 at 15:08
https://stackoverflow.com/questions/10601345/ul-element-can-never-be-a-child-of-p-element — phts, Mar 24 '15 at 15:09

score 7 · Accepted Answer · edited May 23 '17 at 12:14

7

Paragraphs may not contain block-level elements. Some browsers apparently assume you've made a mistake and attempt to correct it.

Read more

edited May 23 '17 at 12:14

Community

1
1

answered Mar 24 '15 at 15:08

isherwood

58,414
16
114
157

1

Presumably because the closing-tag of a `
` element is optional; so when the browser encounters an element that shouldn't be contained within a `
` it automatically closes the paragraph. As for the second paragraph, that seems the more mysterious part, but seems to be a compensation for encountering a closing `
` without a corresponding `
`.
– David Thomas Mar 24 '15 at 15:13
1

Not some of the browsers, but all browsers must cope with invalid html code in order to parse it. They way they do it is not strictly defined and it is called [browser error tolerance](http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#Browsers_error_tolerance). – skobaljic Mar 24 '15 at 15:13

score 4 · Answer 2 · answered Mar 24 '15 at 15:09

4

Your issue is that the <p> tag shouldn't have block elements inside it according to web standards.

http://www.w3.org/TR/html401/struct/text.html#h-9.3.1

answered Mar 24 '15 at 15:09

jdu

581
2
3

Nesting a within a creates two paragraphs. Why?

2 Answers2

Nesting a
within a
creates two paragraphs. Why?