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 span
s 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 ofp
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