Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

html

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> 
like image 675
dynamic Avatar asked Apr 15 '11 19:04

dynamic


People also ask

Can ul be child of P?

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.

Can we add P tag inside UL?

No. If it's list, it has list-items in it.

Can we use P inside Li?

For semantic purposes, content within the li element should be wrapped in a p tag. If there is more than one paragraph or section in a li , do not close the li until after the last element. This differs from the current standard, but is cleaner for accessible content.

Can we have UL inside Li?

The children (direct descendants) of a ul element must all be li elements. This is a purely syntactic requirement. The way to fix the error depends on semantics, however. If the inner lists correspond to subtopics of the topic of the preceding li , then you should wrap the inner list inside that li , e.g.


2 Answers

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.

like image 179
s4y Avatar answered Oct 08 '22 19:10

s4y


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 --> 
like image 21
Quentin Avatar answered Oct 08 '22 17:10

Quentin