定义列表与带标题的无序列表 - 这更具语义感？

Question

假设您有类似电视节目列表的内容，您有节目标题和节目描述。您希望残障人士的列表可访问。

使用定义列表会更有意义吗？

<dl>
    <dt>...title...</dt><dd>...description...</dd>
    ...
</dl>

或带有标题的无序列表？

<ul>
    <li><h3>...title...</h3><p>...description...</p></li>
    ...
</ul>

哪个更具语义感，对屏幕阅读器的反应更好？ （知道它们都可以用同样的方式设置）

Answer 1

如果您使用的是HTML 4.01，则不应使用dl，因为它被定义为“ definition list”（并且您的示例不包含术语及其定义）。如果您使用的是HTML5，则可以使用dl，因为dl的定义已更改。

在文档大纲中使用li内的标题可能会有点问题。标题的范围将包括下一个li：<li><!--scope start--><h3>title</h3><p>description</p></li><li><!--scope end--><h3>…的开头。通过使用section（resp。article），可以避免这种情况。

因此，对于HTML5，我认为可以采用以下方法：

dl

<dl>

  <dt>Title1</dt>
  <dd>Description1</dd>

  <dt>Title2</dt>
  <dd>Description2</dd>

</dl>

如果您只想为每个节目提供标题和说明，那将是我的最爱（如果没有，请参阅最后一个示例）。

ul + section

<ul>

  <li>
    <section>
      <h1>Title1</h1>
      <p>Description1</p>
    </section>
  </li>

  <li>
    <section>
      <h1>Title2</h1>
      <p>Description2</p>
    </section>
  </li>

</ul>

我不太喜欢那样。这个列表在这里没有增加太多，为什么不省略呢？ （见下一个例子）

仅限标题

<section>
  <h1>Title1</h1>
  <p>Description1</p>
</section>

<section>
  <h1>Title2</h1>
  <p>Description2</p>
</section>

而不是section article元素也是可能的。

您也可以省略section（或article）并仅使用标题（在section的情况下，它不会改变含义）;在这种情况下，您需要应用正确的标题级别。

标题+ dl

如果您想提供额外的元数据（可能在将来），我会使用以下标记：

<section>
  <h1>Title1</h1>
  <dl>
    <dt>Description</dt>
    <dd>…</dd>
    <dt>Rating</dt>
    <dd>…</dd>
    <dt>Time</dt>
    <dd>…</dd>
    <dt>Length</dt>
    <dd>…</dd>
  </dl>
</section>

Answer 2

我更喜欢前者。首先，基于内容，它似乎对我更有意义。

但那就是我。我认为标记应该反映文档结构，因为（正如你所说）CSS可以用任何一种方式设置样式，为什么不让标记反映内容呢？包含标题标题的项目列表，后跟描述似乎对我来说有点过分。

但是，嘿。你知道他们对意见的看法。

Answer 3

在这种情况下，使用“定义”列表会更有意义。除此之外，是否真的有必要使用一个列表？只需在带有标签（x = 2-6）的页面上正确使用您的标题标签，并将所有内容都应用于标题下即可。特定的电视节目使用“列表”来显示定义或其他任何内容可能没有意义。同样，它们可以被设计，所以我只是担心这个问题。

希望这会有所帮助 扎克