在 html 的段落中嵌套列表

Question

似乎（严格）html不允许在

中嵌套任何非内联元素，但是我应该如何渲染包含列表的段落（经常发生的事情在自然文本中）。我见过三个答案，但似乎都不满意：

• 列表不应出现在段落内。 （我不打算进行文化辩论，但我当然希望 html 不会成为决定写作风格的地方。）
• 将文本分成一个段落，然后是一个列表，然后是第二个段落后文。这看起来很糟糕，因为现在我有

  块，它们是段落的部分，这对于试图朝着更语义化的方向移动的标记来说似乎很糟糕。

• 使用一些
  的虚假段落 - 这看起来是绕过整个事情并放弃使用具有正确文本语义的标记的糟糕方法。

还有其他方法可以做到这一点在语义上是正确且有效的吗？

Answer 1

截至最新工作草案，HTML 5 中的段落被定义为只能包含短语元素的流程元素。列表也被定义为流程元素，并且不能包含在段落中。无论您认为段落的定义应该是什么，这都是 HTML 中该术语的正式定义，我认为它不太可能改变。

除了您提到的两种可能性之外，您还可以考虑两种可能性：

• 如果适用，请考虑使用比段落更广泛的流程元素，例如 section、nav、页眉、页脚或文章。
• 使用混合方法：使用您选择的 div 包装 p – ol – p 序列，该 div 对集合应用常见格式。

就 div 而言，HTML 5 规范明确建议它应该是“最后的手段”元素，因为它不像其他 HTML 元素那样具有语义含义，并且可能不会作为替代用户代理中的用户友好型。根据这个建议，如果语义对您很重要，我不会以牺牲 p 为代价而使用 div 来表示正文。然而，它有助于确保多个段落的使用不会在视觉上变得过于混乱。

Answer 2

这一切背后是否有视觉风格的原因？换句话说，当您有类似以下内容时，它的视觉呈现方式是否不理想？

<p>Some paragraph text.</p>
<ul>
    <li>First list item</li>
    <li>Second list item</li>
    <li>Third list item</li>
</ul>
<p>Another paragraph.</p>

如果问题是 P 之后和 UL 之前的余量太多，那么您可以尝试像这样的相邻同级选择器来补偿：

p + ul { margin-top: -1em; }

Answer 3

我不认为 html

标签是为了控制实际写作风格的习惯用法。这是一种以有序方式显示文本块的简单方法。我不认为它是为了模拟印刷材料。您必须为此使用 Div。

Answer 4

你的问题的答案显然是否定的，因为规格说明你不能这样做。和你一样，我喜欢维护语义，所以我通常选择你的第二个选项（段落、列表、另一段）。然而，在我的脑海中，我想不出任何列表实际上不会破坏文本流的文本，所以看起来在列表之后开始一个新段落不会有什么坏处。

Answer 5

我想这取决于你认为什么是“段落”。对我来说很明显，HTML 设计者决不认为列表是段落的一部分。虽然我认为这两种解释都可以争论，但我认为该规范是正确的。

虽然列表并不代表思路的突破，但它确实代表了声音或思维方法的改变，我认为这值得一个新的语义容器。

同样，段落代表一篇文章中的逻辑分区。列表表示一系列逻辑分区，虽然可以想象一个逻辑分区可能会被划分为更多分区，但简单地创建一个新分区更有意义（特别是对于语音/方法中如此大的中断）。

语义在很大程度上可能是主观的。那很好。然而，在这种情况下，我认为 HTML 规范正确地表示了语义。