42

when I write this:

<p class="paragraph">the list:
  <ul>
    <li>item</li>
  </ul>
</p>

my browser is semantically rendered it as:

<p class="paragraph">the list:</p>
<ul>
  <li>item</li>
</ul>
<p></p>

why ? and is there a better way to introduce list-items in a paragraph ?

TylerH
  • 20,799
  • 66
  • 75
  • 101
vdegenne
  • 12,272
  • 14
  • 80
  • 106
  • Which browser would that be? Here http://jsfiddle.net/B5f4b/ if you look at the frame source of the result, it seems fine. – Bala R Aug 23 '11 at 23:29

4 Answers4

64

According to the HTML 5 specification, a paragraph may contain phrasing content, which still does not include other grouping elements:

http://www.w3.org/TR/html5/grouping-content.html#the-p-element

According to the HTML 4.01 specification, a paragraph may only contain inline elements:

http://www.w3.org/TR/html401/struct/text.html#h-9.3.1

9.3.1 Paragraphs: the P element

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

The correct markup in this case is to close your paragraph before starting the list.

Alternatively, you can use another tag other than paragraph (like <div>) which is not processed in this way.

<div>
   <ul> ... </ul>
</div>
TylerH
  • 20,799
  • 66
  • 75
  • 101
  • Using `
    ` should be strongly discouraged, as it is not semantic. The correct solution is to use the `

    ` tag in the way described here.

     – brentonstrine Mar 05 '14 at 20:12
  • Yes, I saw the spec, but this is a littlebit inconsitence for me, since they wrote, block levele elements can be contain block level element(s). Is it an expection? – vaso123 Aug 23 '16 at 14:43
  • To complete this answer, part of the "Why?" is that the paragraph tag was not always required to be closed in some versions of HTML; allowing the browser to insert the closing `<\p>` where it made sense (mostly assumed to be before you opened the next paragraph, but not hard defined that way). Thus according to both the noted specifications, closing it before a block level element like unordered list is logical to the browser. – gremlin Oct 06 '20 at 20:56
8

I just had this issue and did not want to enclose it in a DIV since I was using P for the rest of that page and all pages. Instead I styled SPANs to behave like LIs.

SPAN.li  {display: list-item; margin-left: 2em}
<P>These issues are currently on my mind
<SPAN class=li>My hat</SPAN>
<SPAN class=li>Global warming</SPAN>
<SPAN class=li>Global cooling</SPAN>
<SPAN class=li>Global terrorism</SPAN>
<SPAN class=li>Global narrow-mindedness</SPAN></P>
HaLeiVi
  • 301
  • 2
  • 8
4

Lists aren't allowed in paragraphs - there's no way to do it, it's semantically impossible.

If you want the list to inherit styles from the paragraph, just add the UL element to the same CSS styles as your P elements:

eg:

p, ul { font-size: 12px; }

or better yet, encase both elements in something logical (section, article, div).

You've got to ask yourself why you want the list inside the paragraph. If it's because you want them styled the same, then you want them both in the same containing element, eg:

<article>
    <p>Paragraph of text</p>
    <ul>
        <li>List</li>
    </ul>
    <p>Next paragraph</p>
</article>

and then style the article.

mal-wan
  • 4,391
  • 4
  • 26
  • 37
  • 15
    I want a list inside my paragraph, because it emphasizes greatly the structure of my sentence. E.g. „I want to buy [list]• milk, • sugar, • Apple, and • a viola[/list] today.“ This is commonly used when typesetting text with TeX. It is not semantically correct to split my sentence across two paragraphs. – Palec Nov 22 '13 at 17:37
  • So probably div is the best option left. – ling Jul 28 '14 at 12:59
  • What does “semantically impossible” mean? It is definitely not impossible for a paragraph of text to include a list. I write many paragraphs that include lists. In fact, I write many sentences that include lists. – randy Nov 04 '21 at 20:06
-4

Try this. I added it in the middle of my paragraph and it worked. I also gave it a class and line breaks.

HTML:

<div>
<ul class="list">
<br><li>LIST</li></br>
<br><li>LIST</li></br>
</ul>
</div>

CSS:

.list{
list-style: black circle;
padding: 15 15 15 15;
background-color: grey;
}

I just added a background color and padding, which you can remove after. It helps to see what's happening.

Amers
  • 1
  • 1
    This doesn't really answer the question as posed. Also the **only** valid child of `ul` is `li`: [HTML5 Spec](http://www.w3.org/TR/html-markup/ul.html) . Further more there `br` is a self-closing tag there is no `` in HTML – Jon P May 08 '15 at 00:49