最适合此业务声明的 HTML5 元素

Question

一个奇怪的问题，但我正在为语义、可访问性和外观而苦苦挣扎。请注意，此问题与 CSS 无关，但与底层 HTML5 代码相关。通常我不会post这种类型的问题，但这确实引发了一场争论。

我在一个网站上有一份商业声明，它定义了为什么我的组织是最好的（实际上是一个样本声明...）：

TL;DR 从 semantics/accessibility 的角度来看，用于显示此内容的最佳 HTML5 元素是什么？

我们最初的猜测是一个简单的列表就足够了：

<ul>
    <li>Footballs:</li>
    <li>Rounder</li>
    <li>Better</li>
    <li>Stronger</li>
</ul>

但后来的论点是句子结构更重要，所以也许：

<div>
    <span>Footballs:</span>
    <span>Rounder,</span>
    <span>Better,</span>
    <span>Stronger</span>
</div>

但是，这种方法随后会以逗号呈现，这很不雅观。然而，我认为逗号应该存在于屏幕阅读器中...

我们甚至考虑过DataList，但感觉不太对...

<dl>
    <dt>Footballs:</dt>
    <dd>
        <span>Rounder</span>
        <span>Better</span>
        <span>Stronger</span>
    </dd>
</dl>

是否有涵盖此类声明的特定 HTML5 元素？

Answer 1

如果您想使用列表，请写：

Footballs:
<ul>
  <li>Rounder</li>
  <li>Better</li>
  <li>Stronger</li>
</ul>

因为 Footballs 不在列表中。你我想将 Footballs 添加到一些 h 标签中。

第二个的元素没有语义意义，就好像你会写：

Footballs: Rounder, Better, Stronger

所以这是正确的，如果你认为逗号是必需的。

第三个就像你这样写：

Footballs: Rounder Better Stronger

因此，如果您认为这种方式难以理解并且需要逗号，那么您就不能采用这种方式。

我会选择 ul li 版本，用于业务声明，因为我在类似上下文的字典中看到更多 dl。

Answer 2

您有一份清单（在本例中为好处），HTML 提供了四种表达方式。你覆盖了三种方式，第四种是使用ol，但只有在顺序相关的情况下才合适，这里似乎不是这样，所以我们可以忽略它。

就一句话带标点：

<p>Footballs: rounder, better, stronger.</p>

您可以添加 span 元素用于样式设置。您甚至可以在视觉上隐藏逗号，但没有必要这样做，只需使用其中一种标记替代方法即可。

将 "Footballs" 作为列表的一部分没有意义。这个 "label" 应该在列表之外。

<p>Footballs:</p>
<ul>
  <li>Rounder</li>
  <li>Better</li>
  <li>Stronger</li>
</ul>

这三个好处要么是 ul 合一 dd，要么每个都应该是自己的 dd。 There is a semantic difference，但在这个例子中并不是一个明确的决定。

<dl>
  <dt>Footballs</dt>
  <dd>
    <ul>
      <li>Rounder</li>
      <li>Better</li>
      <li>Stronger</li>
    </ul>
  </dd>
</dl>

<dl>
  <dt>Footballs</dt>
  <dd>Rounder</dd>
  <dd>Better</dd>
  <dd>Stronger</dd>
</dl>

如果您不介意使用和显示标点符号，请使用自然语言解决方案。

如果不应该有标点符号，请使用 ul。它没有 dl 复杂，并且因为您没有额外的名称-值组，所以 dl 并不是真正的 "worth"。

Most suitable HTML5 element for this business statement