Nest lists in paragraphs in html

Zee picture Zee · Jul 7, 2010 · Viewed 7.3k times · Source

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

Owen S. picture Owen S. · Jul 7, 2010

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.