Should Ol/Ul Be Inside ≪P≫ or Outside

Should ol/ul be inside p or outside?

The short answer is that ol elements are not legally allowed inside p elements.

To see why, let's go to the spec! If you can get comfortable with the HTML spec, it will answer many of your questions and curiosities. You want to know if an ol can live inside a p. So…

4.5.1 The p element:

Categories: Flow content, Palpable content.

Content model: Phrasing content.

4.5.5 The ol element:

Categories: Flow content.

Content model: Zero or more li and script-supporting elements.

The first part says that p elements can only contain phrasing content (which are “inline” elements like span and strong).

The second part says ols are flow content (“block” elements like p and div). So they can't be used inside a p.

ols and other flow content can be used in in some other elements like div:

4.5.13 The div element:

Categories: Flow content, Palpable content.

Content model: Flow content.

Can we have ul inside a paragraph

No. See the spec.

A paragraph can contain "Phrasing content." which does not include list elements.

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

a abbr area (if it is a descendant of a map element) audio b bdi bdo br button canvas cite code data datalist del dfn em embed i iframe img input ins kbd keygen label map mark math meter noscript object output progress q ruby s samp script select small span strong sub sup svg template textarea time u var video wbr text

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

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.

p tag not containing ul tag

Please see the answer from a similar question: List of HTML5 elements that can be nested inside P element?

Only phrasing content can be in between the <p> tag and is described as follows:

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

Can we use any other TAG inside ul along with li?

For your code to be valid you can't put any tag inside a <ul> other than an <li>.

You can however, put any block level element inside the <li>, like so:

<ul>
        <li>
            <h2>...</h2>
            <p>...</p>
            <p>...</p>
        </li>
</ul>

Why won't this CSS selector work for li when inside p tag?

It's because ol/ul items aren't allowed inside of p elements.

Should ol/ul be inside <p> or outside?

Seems like a trick question for your exam then. Most likely you will want to brush up on the HTML spec since the question isn't truly based on CSS knowledge alone.

You are getting the described behavior because <p> cannot contain block-level elements such as <ul> or <ol>. The browser (e.g., Chrome) knows this is not possible and thus try to handle your illegal structure by placing your block element in between two paragraphs:

Because of this, the rule you have declared for that li does not apply.

p ul li {  color: blue;}

<p>  Hello  <ul>    <li>I'm never blue.</li>  </ul>  Goodbye</p>

9.3.1 Paragraphs: the P element

<!ELEMENT P - O (%inline;)*            -- paragraph -->
<!ATTLIST P
  %attrs;                              -- %coreattrs, %i18n, %events --
  >

<div>
   <ul> ... </ul>
</div>

<body>
  <main></main>
  <aside><!-- related to the body --></aside>
</body>

<body>
  <main><aside><!-- related to the body --></aside></main>
</body>

<body>

  <main>

    <article>

      <aside><!-- related to the article --></aside>

      <section>

        <aside><!-- related to the section --></aside>

        <blockquote>
          <aside><!-- related to the blockquote (not to the section!) --></aside>
        </blockquote>

        <div>
          <aside><!-- related to the section (not to the div!) --></aside>
        </div>

      </section>

    </article>

    <aside><!-- related to the body (not to the main!) --></aside>

  </main>

  <aside>
    <!-- related to the body -->
    <aside><!-- related to the (parent) aside --></aside>
  </aside>

  <nav>
    <aside><!-- related to the nav --></aside>
  </nav>

  <footer>
    <aside><!-- related to the body (not to the footer!) --></aside>
  </footer>

</body>