An 'ul' element can never be a child of a 'p' element

Question

Why can we never have a ul element as the child of a p element?

I made a web page with the following code

<p> some text <ul> <li>...</li> <li>...</li> . . . </ul> </p> 

Here, the ul element is a child of the p element. However, in all major browsers (Chrome, Firefox, and Internet Explorer - all latest versions), it gets interpreted as follows

<p> some text</p> <ul> <li>...</li> <li>...</li> . . . </ul> <p></p> 

I checked it by right-clicking on the ul element (in Chrome) and selecting the inspect element option. I saw it in Chrome, but the other two browsers also behaved in the same way (CSS selecter 'p ul' didn't work well).

Why is it so? Is there a general case in which such changes by the browser takes place?

Answer 1

Please check the HTML specification, which clearly states that putting lists in a paragraph element is forbidden, and also give some examples on what could be done:

List elements (in particular, ol and ul elements) cannot be children of p elements. When a sentence contains a bulleted list, therefore, one might wonder how it should be marked up.

For instance, this fantastic sentence has bullets relating to

• wizards,
• faster-than-light travel, and
  
• telepathy,

and is further discussed below.

The solution is to realise that a paragraph, in HTML terms, is not a logical concept, but a structural one. In the fantastic example above, there are actually five paragraphs as defined by this speciication: one before the list, one for each bullet, and one after the list.

The markup for the above example could therefore be:

  <p>For instance, this fantastic sentence has bullets relating to</p>     <ul>        <li>wizards,          <li>faster-than-light travel, and          <li>telepathy,     </ul>    <p>and is further discussed below.</p> 

Authors wishing to conveniently style such "logical" paragraphs consisting of multiple "structural" paragraphs can use the div element instead of the p element.

Thus for instance the above example could become the following:

   <div>For instance, this fantastic sentence has bullets relating to    <ul>      <li>wizards,        <li>faster-than-light travel, and        <li>telepathy,    </ul>     and is further discussed below.</div>  

This example still has five structural paragraphs, but now the author can style just the div instead of having to consider each part of the example separately.

Answer 2

It has always been a rule in HTML that a p element can contain only text and text-level markup, not a list for example. Therefore, browsers imply a closing </p> tag when a p element is open and a start tag for a block level element, like <ul>, is encountered. In your example, the </p> tag after </ul> is homeless and normally ignored.