Search code examples
html

Cannot include a list inside a paragraph element


When I write this HTML:

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

…my browser builds the DOM as follows:

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

Why? And is there a better way to introduce list items in a paragraph ?


Solution

  • 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>