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

Html

Html Problem Overview


Which is standard compliant between these two?

<p>Text text text ...
    <ol>
        <li>First element</li>
    </ol>
</p>
<p>
    Other text text ...
</p>

OR

<p>
    Text text text ...
</p>
<ol>
    <li>First element</li>
</ol>
<p>
    Other text text ...
</p>

Html Solutions


Solution 1 - Html

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.

Solution 2 - Html

The second. The first is invalid.

  • A paragraph cannot contain a list.
  • A list cannot contain a paragraph unless that paragraph is contained entirely within a single list item.

A browser will handle it like so:

<p>tetxtextextete 
<!-- Start of paragraph -->
<ol>
<!-- Start of ordered list. Paragraphs cannot contain lists. Insert </p> -->
<li>first element</li></ol>
<!-- A list item element. End of list -->
</p>
<!-- End of paragraph, but not inside paragraph, discard this tag to recover from the error -->
<p>other textetxet</p>
<!-- Another paragraph -->

Solution 3 - Html

actually you should only put in-line elements inside the p, so in your case ol is better outside

Solution 4 - Html

<p>tetxetextex</p>
<ol><li>first element</li></ol>
<p>other textetxeettx</p>

Because both <p> and <ol> are element rendered as block.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestiondynamicView Question on Stackoverflow
Solution 1 - Htmls4yView Answer on Stackoverflow
Solution 2 - HtmlQuentinView Answer on Stackoverflow
Solution 3 - HtmlKris IvanovView Answer on Stackoverflow
Solution 4 - HtmlDavidView Answer on Stackoverflow