指示`ul`不包含任何`li`的语义[关闭]答案

【问题标题】：Semantics of indicating that a `ul` doesn't contain any `li`s [closed]指示`ul`不包含任何`li`的语义[关闭]
【发布时间】：2020-04-11 09:43:01
【问题描述】：

我有一个ul，里面可以有不同数量的lis：

<ul>
  <li>content</li>
  <li>content</li>
</ul>

当列表中没有项目时，我们将没有 li 元素：

<ul>
  <!-- nothing -->
</ul>

但是，当它显示给用户时，甚至不清楚那里是否有一个列表。为了改善用户体验，我们希望以某种方式指出缺少项目。

为了解决用户体验问题，人们倾向于创建一个li，上面写着：

<ul>
  <li>no items</li>
</ul>

但是，这意味着列表中实际上有一个项目，“没有项目”。这是不正确的。

另一种选择是在ul 中放置一个不同的元素来指示缺少项目：

<ul>
  <div>no items</div>
</ul>

但是，ul 内只允许使用 lis（和脚本 + 模板元素）。

我的问题是：向用户指示列表不包含任何项目的推荐方式（语义正确）是什么？

表格也有同样的问题，但我怀疑解决方案会类似。

【问题讨论】：

无序列表仅具有您赋予它的语义含义，而不仅仅是没有内在顺序的列表。如果您说列表中有一个项目说没有项目，那么您已经为该项目赋予了“不是项目”的语义，因此它是正确的。
无论如何，在 Stack Overflow 上征求建议和意见都是题外话。做你认为正确的事。
如果没有要列出的项目，则只需删除该列表。您将列表保留在适当的位置，但将其保留为空。你要么删除列表，因此暗示一个空列表不是列表，或者你离开空列表，如果你明确说列表是空的，则离开。
只需将 <ul> 替换为 <span> 或“您的列表为空”的内容。

【解决方案1】：

为空后可以使用css

ul:empty::after {
  content: "No results";
}

<h3>Empty</h3>
<ul></ul>
<h3>Not Empty</h3>
<ul>
  <li>X</li>
</ul>

【讨论】：