Question

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 ?

Answer 1

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>