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?

Tune

+1 for pointing out the common work-arounds for this issue. The problem is even more visible, when you use a list in the middle of a sentence to emphasize its structure, as splitting a sentence across different paragraphs is definitely semantically incorrect. E. g. „I want to buy [list]• milk, • sugar, • Apple, and • a viola[/list] today.“ This is commonly used when typesetting text with TeX. – Manner

Answer 1

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.

Wilburnwilburt

The situation I'm faced with is of a system for generating HTML, and it seems that the best option in this case is therefore to use divs. Other than that, the suggestion of using the wider tags seems like a good idea too. – Tune

Answer 2

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; }

Anallise

The visual rendering wasn't the problem (divs work fine anyway) — it was an attempt to find some "right" way to do this, keeping the tags meaningful. – Tune

This doesn't distinguish a list in a paragraph and a list ending a paragraph, which is fine if your layout is intended to look the same for both cases. But if your paragraphs are indented (which is the only way paragraphs are supposed to look in some languages) then this is not workable. – Unscratched

Answer 3

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.

Hugo

If it's only for formatting, then it seems like there's very little point in using the p tag anyway... But I'm pretty sure that I've seen some mentions of browsers that treated them differently — but I don't remember where. (Maybe something related to screen readers.) – Tune

Some may handle it diffirently, but you never want to stake the quality of your work on those implimentations. You always, always, want to shoot for the middle ground; the more users you can make happy the better off your site will be. – Hugo

According to the HTML 4.01 spec the paragraph is an inline element. That is why they do not want nesting. – Hugo

Answer 4

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.

Thistly

It's probably more common for the list to be part of the preceding text (and I know that there won't be any difference in how it renders, but Im trying to figure out what the right thing is...). – Tune

Answer 5

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.

Arnie

Well, I specifically avoided discussing whether this is a correct decision or not — more to the point, I don't think that the HTML spec authors should be in a position where they determine whether a list-in-a-paragraph is something that should be permitted or not. That requires thorough investigation into typographical works across different cultures, and there are certainly plenty of examples of typographical systems (La/TeX being an obvious one) that permit nested lists in paragraphs. – Tune

I suppose, then, that the easy answer to your question is "no" – Arnie

BTW — personally, I think that if the official spec's answer is that you shouldn't write a list inside a paragraph because it's wrong, and if there was no such thorough investigation (which the Unicode authors invest a ton of time on), then this is just plain arrogance. This is why I expect the actual answer to be based on technical issues of rendering and presentation rather than deciding for me what should be considered good style. – Tune

@Zee: I'm guessing legacy is the driving factor at this point, actually, whether p should be able to contain lists or not. The concept that ul and ol should imply a paragraph break dates all the way back to HTML 1.2. – Wilburnwilburt