将列表放在HTML5中的段落中的正确方法是什么？

Question

我得到了为什么<p>元素不能包含<ul>元素的技术解释.不幸的是,当这是内容的结构时,这对我没有帮助.

在meta中,我也不理解

• 语义解释也没有
• 推荐的结构

对于我实际上想要显示具有正常内容的"内联"项目列表的情况.

此页面建议将列表与段落分开:

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

或使用段落的替代标记:

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

但是这两个都让我觉得可怕的黑客攻击HTML5所谓的语义内容.

在第一种情况下,<p>标签在语义上有何意义？更不用说如果我想消除列表周围的间距(如果我有其他列表确实是单独的内容块,那么正确设置样式的实际困难 - 哦!)

在第二种情况下,如果我需要有一个<div>意思是"这是一段内容",我也可以<p>完全放弃,而不必根据段落中出现的内容来回切换.

ISTM最具语义意义的版本可能是这样的:

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

将跨度样式设置为块或列表项(以及谁知道其他调整)以使渲染正确.实际上,这听起来像是一种可怕的恶化.

是否有任何关于呈现此类内容的好建议？

编辑

看起来,这实际上并不是那么难的风格.我不确定是否有办法获取所有浏览器默认值,但我可以复制默认列表样式(至少在OS X Chrome上):

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

Answer 1

对我来说，这是列表炎的一个例子，或者将每一个事物序列视为一个需要如此标记的列表。

我的第一个方法是将您拥有的标记为：

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

如果您需要对这些项目应用通用样式，那么适当的样式挂钩就像<span>您在最后一个示例中所使用的那样。不过我不会用作li类名；每一段文本是否构成一个列表项并没有多大意义。在不知道页面的整体内容以及它在上下文中如何使用的情况下，选择正确的类名总是很困难，但可能topic是一个合适的选择。所以标记变成

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