时间戳

首页 > 解决方案 > 使用是否合适

技能列表？

html - 使用是否合适
技能列表？

问题描述

我正在为我的投资组合网站写一个“关于我”的页面，我想知道<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>

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

谢谢！

标签： htmlaccessibilitysemantics

解决方案

简短的回答

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

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

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

更长的答案

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

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

我想知道是否<div>允许进入<dl>，是的，根据这个问题。所以继续使用定义列表。

推荐阅读