Nest lists in paragraphs in html

Question

It seems that (strict) html doesn't allow nesting any non-inline elements inside a <p>, but then how am I supposed to render a paragraph that contains a list (something that occurs often in natural texts). I've seen three answers that all seem unsatisfying:

• Lists should not happen inside paragraphs. (I'm not going to go into a cultural debate, but I certainly hope that html is not going to become the place to dictate writing style.)
• Separate the text into a paragraph, then a list, and then a second paragraph with the post-text. This looks bad because now I have <p> chunks that are parts of paragraphs, and that seems bad for a markup that is trying to to move in a more semantic direction.
• Fake paragraphs using some <div class="mypara"> — which looks like a bad way to bypass the whole thing and give up on using the markup with the proper semantics for text.

Is there some other way to do this that is semantically correct and valid?

Answer 1

I don't think the html <p> tag is meant to control the idioms of actual writing styles. It is simpy a way to display a chunk of text in an orderly manner. I don't believe it is meant to simulate printed material. You will have to use a Div for this one.

Answer 2

The answer to your question is obviously no, because the specs say you can't do it. Like you, I like to maintain semantics, so I usually go with your 2nd option (paragraph, list, another paragraph). However, off the top of my head, I can't think of any text where the list doesn't actually break the flow of text, so it seems that starting a new paragraph after a list can't hurt.

Answer 3

Paragraphs in HTML 5, as of the latest working draft, are defined as flow elements which can contain phrasing elements only. Lists are also defined as flow elements, and may not be enclosed in paragraphs. Whatever you think the definition of paragraph should be, this is the formal definition of the term in HTML, and I think it's unlikely to change.

There are two possibilities that you might consider besides the two you've mentioned:

• Consider reaching for a more broad-reaching flow element than paragraph if it applies, such as section, nav, header, footer, or article.
• Use a hybrid approach: wrap the p – ol – p sequence with a div of your choosing that applies common formatting to the set.

As far as div goes, the HTML 5 spec clearly recommends that it should be a "last resort" element because it doesn't bear semantic meaning in the way that other HTML elements do, and may not be as user-friendly in alternative user agents. Going by this advice, I wouldn't use div at the cost of p for body text if semantics are important to you. However, it can be useful in making sure that the use of multiple paragraphs does not get too visually choppy.

Answer 4

I suppose it depends on what you consider to be a "paragraph". It is obvious to me that the designers of HTML in no way consider a list to be part of a paragraph. And while I think an argument could be made for either interpretation, I'm of the opinion that the spec is correct.

While a list doesn't represent a break in line of thought, it certainly represents a change in voice or method of thought, which I believe merits a new semantic container.

In the same vein, a paragraph represents a logical partition in a piece of writing. A list represents a sequence of logical partitions, and while it is imaginable that one logical partition may be then divided into more partitions, it makes more sense to simply create a new partition (especially for such a large break in the voice/method).

Semantics can be largely subjective. And that's fine. However, in this case, I'm of the opinion that the HTML spec correctly represents the semantics.

Answer 5

Is there a visual style reason behind all this? In other words when you have something like the following, is it visually rendering in a way that you do not find ideal?

<p>Some paragraph text.</p>
<ul>
    <li>First list item</li>
    <li>Second list item</li>
    <li>Third list item</li>
</ul>
<p>Another paragraph.</p>

If the problem is too much margin after the P and before the UL, then you can try an adjacent sibling selector like this to compensate:

p + ul { margin-top: -1em; }