最适合此业务报表的HTML5元素

Question

一个奇怪的问题，但是我在语义，可访问性和外观上苦苦挣扎。请注意，此问题与CSS无关，但与底层HTML5代码有关。通常我不会发布此类问题，但这确实引发了争论。

我在网站上有一份业务声明，其中定义了为什么我的组织是最好的（实际上是示例声明...）：

TL; DR从语义/可访问性的角度来看，用于显示此内容的最佳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

您有一些清单（在本例中为其中的好处），HTML提供了四种方法来传达这一点。您涵盖了三种方式，第四种方式是使用ol，但这仅在顺序相关时才适用，在这里似乎不是这种情况，因此我们可以忽略它。

自然语言

只有标点符号的句子：

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

您可以添加span元素以进行样式设置。您甚至可以在视觉上隐藏逗号，但是无需这样做，只需使用一种标记替代方法即可。

标记：ul

将“足球”作为列表的一部分是没有道理的。此“标签”应在列表之外。

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

标记：dl

这三个好处应该是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并不真正“值得”。

Answer 2

如果要列出清单，请输入：

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。