34

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?

1

3 Answers 3

47

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.

5
  • I'm using trumbowyg and inside the editor chrome allows ol inside of p: i.imgur.com/1uyqtNO.png . Outside the editor's HTML, it has the same problem as OP. The editor gives me HTML code and I have to present it outside of it, so it breaks (because it has ol inside of p). How does the editor allow it in itself?
    – hytromo
    Aug 27, 2017 at 15:44
  • @hakermania The editor manipulates the DOM on the fly (through JS). Chrome reading HTML and building up the DOM from it is a different scenario.
    – kapa
    Aug 29, 2017 at 17:52
  • The value (html code) of the editor is given within the html of the file itself (imagine <textarea> <HTML CODE HERE> </textarea>) and then the editor's js code is called upon the textarea element. This means that the browser has the 1st say on the html code within the textarea and then the editor. So if chrome has converted <p><ol>...</ol></p> to <p></p><ol>...</ol> then the editor will see the latter value and have no knowledge of the former. I think something else happens under the hood but I can't find it.
    – hytromo
    Aug 30, 2017 at 20:37
  • @hakermania Whatever is inside the textarea tag, it will not be validated as HTML by the browser - it is treated as an ordinary string.
    – kapa
    Aug 31, 2017 at 12:02
  • 1
    According to whatwg.org, this is indeed the correct answer. Unfortunately MDN is sending a confusing message with their own ul/ol description stating that Permitted parents: Any element that accepts flow content. (developer.mozilla.org/en-US/docs/Web/HTML/Element/ol) The list of flow content elements contains p as well. Very confusing.
    – minusf
    Nov 9, 2017 at 15:20
5

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.

4

<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?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.