Lists cannot be children of Paragraphs

Yes, truly. I admit I was a little surprised at learning this, but according to the W3 HTML spec for the p element:

List elements (in particular, ol and ul elements) cannot be children of p elements.

Reading a bit further, paragraphs are intended for phrasing content:

Phrasing content is the text of the document, as well as elements that mark up that text at the intra-paragraph level.

Also,

Most elements that are categorized as phrasing content can only contain elements that are themselves categorized as phrasing content, not any flow content.

Whereas, lists (e.g. ul, ol) are defined as flow content.

Impact

What happens when you have a list as a child of a paragraph? It turns out that the browser will actually close your p tag when it tries to render your list. It does this at the start of your list. In my example, I show a paragraph with a ul inside it, and attempt to select the ul to color it blue. But it doesn't work due to the above (per the specification, properly rendered) behavior.

DEMO WITH CODE

Learn something new every day. :-)