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