RK Poddar RK Poddar - 22 days ago 6
HTML Question

ul element can never be a child of p element

Why can we never have 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, he ul element is a child of the p element. However, in all major browsers(Chrome, Firefor, IE)(all latest versions), it got 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 2 browsers also behaved in the same way(css selecter 'p ul' didnt work well).

Why is it so? Can anyone tell a general case in which such changes by the browser takes place?

Answer

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.