将 <dl> 用于技能列表是否合适？

Question

我正在为我的投资组合网站编写一个“关于我”页面，我想知道使用 <dl> 列出我的技能在语义上是否正确。像这样的：

<dl>
  <div class="flex-container flex-row">
    <dt>html</dt>
    <dd>clean,</dd>
    <dd>semantic,</dd>
    <dd>accessible.</dd>
  </div>
  <div class="flex-container flex-row">
    <dt>css</dt>
    <dd>flexbox,</dd>
    <dd>grid</dd>
  </div>
</dl>

还是只使用<ul> 更好？我主要想知道屏幕阅读器会用它做什么。 MDN 有点不清楚。

谢谢！

Answer 1

简答

争论主要在定义列表与一系列标题+段落之间。从技术上讲，它们通常可以互换，不会产生重大后果。

我想说，选择其中一个实际上应该取决于定义主体的长度。 如果它保持很短，使用定义列表可能会更好。如果定义需要整个段落，那么最好使用标题和段落。

在你的情况下，我建议保留定义列表，因为你的“定义”很短。

更长的答案

在考虑 short=definition 列表、long=headings+paragraphs 的背后，请记住屏幕阅读器可以选择按标题进行导航：

• 如果有很多，导航的效率就会降低。 您必须将它们用于页面的重要部分，但不应过度使用它们来拆分太小的部分。如果您对每个技能使用一个标题和一个段落，那么您的技能列表之类的内容可能会产生太多嘈杂/非常无用的标题。
• 在对面，如果没有标题或标题太少，则导航将毫无用处。如果 DD 的内容变长了，其实你的 DT 是在“偷”一个标题，也就是说，你应该用一个标题来分隔那个长的 DD 部分，这样就可以快速跳转到它。 在您的情况下，您的 DD 相当短，因此您根本没有“窃取”任何标题。

我想知道<dl> 中是否允许<div>，是的，它是根据this question。 所以继续使用定义列表。