html - List or longer code snippet inside paragraph

Question

When writing about algorithms, it is often very convenient to write some (pseudo)code inside a paragraph, or even in the middle of a sentence. To visually support the structure of a more complex sentence, lists come handy too.

Obviously, one sentence must not be split across different paragraphs. But in our case it has to be due to HTML nesting rules.

Paragraph is the p element, which cannot contain block-level elements. Unfortunately for our case, pre and lists are block-level.

If I do not obey the spec and include pre or ol/ul/dl in a p, the p is automatically closed right before the element’s start tag by any parser I know. (This is due to the SGML OMITTAG feature settings on p.) Maybe this and backward compatibility are the reason behind the design decision of disallowing pre and lists inside p.

Is there any way, how to include lists and longer code snippets into paragraphs?

---

I could re-formulate my sentences and paragraphs not to need snippets and lists, but it needs much thinking and attention and could make my text harder to read and understand. This is not a solution for me.

I could use code with whitespace: pre and display: block for longer code snippets and code with whitespace: pre-wrap for the shorter ones. Is this semantically correct?

I could think of lists inside sentences as mere visual sugar with no semantics at all. Then I would use spans with display: list-item to make them look like lists. Would that be correct from the semantical point of view? Is the sacrifice of semantical structure necessary?

---

This question applies to both HTML and XHTML as the rules for nesting elements are the same. By HTML i mean HTML 4.01 Strict, by XHTML i mean XHTML 1.0 Strict. Is this issue somehow addressed in HTML 5?

To be explicit, I want a standards-compliant, both syntactically and semantically correct solution, not a non-standard hack of any kind. Specifically, turning p into div is not a solution for me.

---

Related questions

• ul element can never be a child of p element
• <code> vs <pre> vs <samp> for inline and block code snippets
• <pre> tag making browsers close paragraphs
• Can I have a <pre> Tag inside a <p> tag in Tumblr?
• Should ol/ul be inside <p> or outside?
• unordered list in a paragraph element
• Nest lists in paragraphs in html

See also

• CSS Design: Taming Lists @ A List Apart

Answer 1

As far as HTML is concerned, all that a single <p> element represents is a block of phrasing content that happens to flow like a paragraph of text. Even though it's called a paragraph, it doesn't have to strictly represent a paragraph of text in writing.

You are not compromising semantics in any way by breaking a paragraph, even mid-sentence, into two <p> elements in order to introduce a list or a block-level code snippet. It is completely acceptable.

As a matter of fact, HTML5 agrees (whereas HTML 4 woefully has absolutely nothing to say beyond "the P element represents a paragraph"):

List elements (in particular, ol and ul elements) cannot be children of p elements. When a sentence contains a bulleted list, therefore, one might wonder how it should be marked up.

For instance, this fantastic sentence has bullets relating to

• wizards,
• faster-than-light travel, and
• telepathy,

and is further discussed below.

The solution is to realise that a paragraph, in HTML terms, is not a logical concept, but a structural one. In the fantastic example above, there are actually five paragraphs as defined by this specification: one before the list, one for each bullet, and one after the list.

The markup for the above example could therefore be:

<p>For instance, this fantastic sentence has bullets relating to</p>
<ul>
 <li>wizards,
 <li>faster-than-light travel, and
 <li>telepathy,
</ul>
<p>and is further discussed below.</p>

If you view the source of the document, you can see that even the quoted example consists of a <p> element containing the text "The markup for the above example could therefore be:", immediately followed by a <pre> element containing the example markup.

If you are still concerned, HTML5 offers an alternative, but that basically involves using a <div> instead of separate <p> elements, which as you've stated is not a solution for you.

Lastly, it is safe to assume that everything I've mentioned applies to HTML 4 and XHTML 1 as well. For what it's worth, this concept was explored in XHTML 2, which would have allowed <p> elements to contain any other type of content.