代码之家 › 专栏 › 技术社区 › EvilDr

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

semantic-markup html5

0

EvilDr · 技术社区 · 6 年前

一个奇怪的问题,但是我在语义、可访问性和外观之间挣扎。请注意,这个问题与css无关,而是底层html5代码。通常我不会提出这类问题,但这真的引发了一场辩论。

我在一个网站上有一份商业声明,该声明定义了为什么我的组织是最好的(实际上是一份示例声明…):

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>

然而,这种方法随后会用逗号表示,这很难看。然而,我脑海中的反论点是逗号应该为屏幕阅读器…

我们甚至考虑过数据列表,但感觉不到 完全正确 …

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

是否有一个特定的html5元素覆盖了这类语句?

2 回复 | 直到 6 年前

1

2

unor 6 年前

您有一个东西的列表(在本例中是优点),html提供了四种表达方式。你有三种方法,第四种是 ol ,但这仅适用于与订单相关的情况,这里似乎不是这样,所以我们可以忽略它。

只是一个标点符号的句子:

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

您可以添加 span 用于样式设置的元素。您甚至可以在视觉上隐藏逗号,但不需要这样做,只需使用一个标记替代品即可。

将“足球”作为列表的一部分是没有意义的。这个“标签”应该在列表之外。

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

三个好处应该是 保险商实验室 在一个 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>

如果你对标点符号的使用和显示很在行,那就使用自然语言解决方案。

如果没有标点符号,请使用 保险商实验室 .它比 数字图书馆 ,由于没有其他名称值组, 数字图书馆 真的不值得。

2

1

t.niese 6 年前

如果你想列出一个清单,那么写下:

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

因为 Footballs 不在足球队的名单上。我想加上你 足球 变成一些 h 标签。

第二个元素没有语义,就像你会写:

Footballs: Rounder, Better, Stronger

如果你认为逗号是必需的,那么这是正确的。

第三个就好像你在写:

Footballs: Rounder Better Stronger

因此,如果你认为这样做是不可理解的,并且需要逗号,那么你就不能采用这种方法。

我会和 ul li 版本,商业声明,因为我明白 dl 更多的是在类似字典的上下文中。