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?

Possible duplicate of [Should ol/ul be inside
or outside?](http://stackoverflow.com/questions/5681481/should-ol-ul-be-inside-p-or-outside) — TylerH, Oct 20 '15 at 19:20

kapa · Accepted Answer · 2015-02-17T14:33:01.007

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.

edited Feb 17 '15 at 14:33

answered May 15 '12 at 13:10

kapa

77,694
21
158
175

I'm using trumbowyg and inside the editor chrome allows `ol` inside of `p`: https://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 '17 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 '17 at 17:52
The value (html code) of the editor is given within the html of the file itself (imagine ` `) 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 `
` to `
` 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 '17 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 '17 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.` (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol) The list of flow content elements contains `p` as well. Very confusing. – minusf Nov 09 '17 at 15:20

score 5 · Answer 2 · answered May 15 '12 at 14:22

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.

score 4 · Answer 3 · edited May 23 '17 at 11:54

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

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

3 Answers3

Linked

Related