What's the right way to put lists within a paragraph in HTML5?

Question

I get the technical explanation for why a <p> element can't contain a <ul> element. Unfortunately, this doesn't help me when that's the structure of the content.

In meta, I understand neither

• the semantic explanation, nor
• the recommended structure

for cases where I actually want to show a list of items "inline" with normal content.

This page suggests either separating the list from the paragraphs:

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

or using an alternate tag for the paragraph:

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

But both of these strike me as terrible hacks that make a mockery of HTML5's supposed semantic content.

In the first case, how is the <p> tag semantically meaningful? Not to mention the practical difficulty of correctly styling this if I want to eliminate the spacing around the list (and then if I have other lists that really are separate blocks of content -- oy!)

In the second case, if I need to have a <div> that means "this is a paragraph of content" I might as well just drop <p> entirely, rather than have to switch back and forth depending on the content appearing within the paragraph.

ISTM that the most semantically meaningful version might be something like:

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

with the spans styled as block or list items (and who knows what other tweaks) to get the rendering right. Practically, this sounds like an awful lot of aggravation.

Is there any good recommendation for rendering this sort of content?

Edit

This is actually not all that hard to style, it seems. I'm not sure if there's a way to pick up all the browser defaults, but I can replicate the default list style (on OS X Chrome, at least) with:

span.li {
  display: list-item;
  list-style-type: disc;
  margin-left: 40px;
}

Answer 1

To me, this is an example of listitis, or seeing every sequence of things as a list that needs marking up as such.

My first approach would be to mark up what you have as:

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

If you need to apply a common styling to those items, then the appropriate styling hook is <span> as you have in your final example. I wouldn't use li as a class name though; whether each scrap of text constitutes a list-item or not is not very meaningful. It's always difficult to choose correct class names without knowing the overall content of the page and how it is used in context, but possibly topic would be an appropriate choice. So the mark-up becomes

<p>For instance, this fantastic sentence has bullets relating to <span
class="topic">wizards</span>, <span class="topic">faster-than-light 
travel</span>, and <span class="topic">telepathy</span>, and is further 
discussed below.</p>

Answer 2

Seems to me if you're employing a ul or ol you're effectively ending the paragraph (or other element) that precedes it unless you're nesting lists. If it really was a sentence and those items were inline (and in the case you propose, I think all that really is a sentence), then I'd just list them out within the <p> with commas as delimiters:

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

If you really want bullets, perhaps a heading would be more fitting:

<h2>For instance, this fantastic heading has bullets relating to:</h2>
<ul>
 <li>wizards,
 <li>faster-than-light travel, and
 <li>telepathy,
</ul>