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

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?

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

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

Solution 3:

<p> can have only inline elements as childs and no block elements (see, e.g, at MDN). <ul> on the other hand is a block level element (MDN)!

The reason why browser interpret your code as you have seen lies in the HTML5 parsing spec. The spec lists an example very much like your own: whatwg link.

Another interesting related question might be this: HTML: Include, or exclude, optional closing tags?