利用被忽视的 (但语义很棒的) 定义列表

语义！当我们谈论 HTML 中的语义时，我们指的是如何使用 HTML 标签来描述内容。良好的语义意味着标签被很好地使用来描述内容。糟糕的语义意味着使用的标签 poorly 描述内容。良好的语义并不一定意味着使用最少的标签，而仅仅意味着使用的标签有意义，并且同样重要的是，它们在一起使用时也有意义。糟糕的语义 也不一定意味着您不正确地使用了标签，它更多地是指语法。

一个视觉示例。

让我们来看一个内容示例

从语义上讲，思考此内容的一种方式是将其分成两个相关的部分。一个部分称为“跟踪您的支出”，它包含一些描述性数据，另一个部分称为“RSS Feed”，它也包含一些描述性数据。记住这一点，然后查看这段代码

<div class="chunk">
  <h4>Track your expenses</h4>
  <img src="/images/paper_small.gif" alt="" class="left"/>
  <p>Divide bills easily by creating receipts and letting billshare do the math. Automatically keep a searchable history of all bills.</p>
</div>
<div class="chunk">
  <h4>RSS Feeds</h4>
  <img src="/images/rss_big.jpg" alt="" class="left"/>
  <p>Keep track of new receipts are posted to your groups instantly by subscribing to the groups RSS feed.</p>
</div>

从语义上讲，这是不正确的。

即使这段代码非常干净并且可以正常工作，但从语义上讲，它偏离了我们最初的想法。有两个问题。首先，div 分别独立地隔开了部分，而不是将它们放在一起。其次，“描述”被拆分为一个<img>元素和一个<p>元素，而不是放在一起。

定义列表来救援。

好的好的。我们调整了示例。这恰好是定义列表的完美场景。定义列表由三种不同的标签组成

• <dl>: 容器
• <dt>: 定义术语（就像标题一样）
• <dd>: 定义描述

现在让我们尝试使用定义列表重写此内容。我们知道现在可以将整个内容包装在一个容器中，并将所有内容放在一起。我们知道可以将标题设置为定义术语。但是那个描述呢？从语义上讲，最好的方法是将所有内容都包含在一个定义描述元素中……我们可以！唯一的障碍是图像在不同部分之间有所不同，因此我们需要对<dd>元素应用一个唯一的类。

<dl>
  <dt>Track your expenses</dt>
  <dd class="chunk_divide">Divide bills easily by creating receipts and letting billshare do the math. Automatically keep a searchable history of all bills.</dd>

  <dt>RSS Feeds</dt>
  <dd class="chunk_rss">Keep track of new receipts are posted to your groups instantly by subscribing to the groups RSS feed.</dd>
</dl>

这些标签为您在 CSS 中提供了许多样式选项。

dt {
  font-weight: bold;
}
dd {
  background:none no-repeat left top;
  padding-left: 50px;
}
dd.catchPhrase1 {
  background-image:url('../img/paper_small.gif');
}
dd.catchPhrase2 {
  background-image:url('../img/stats.gif');
}

我不能使用无序列表来做这件事吗？

当然可以。但是列表只能包含列表元素，因此标题和描述的语义描述不如定义列表好。实际上，您可以使用表格、div 甚至任何数量的 HTML 元素来实现，但没有一个在语义上像在这种情况下使用定义列表那样合理。

它们还能做什么？

我很高兴您问这个问题，因为此示例没有充分利用定义列表的所有功能。另一个主要优势是，在定义列表中，您可以使用多个术语或多个描述，这都没有关系！让我们考虑一些示例。

DT: 网站链接
  DD: 网站描述

DT: 即将到来的演出
  DD: 日期
  DD: 场地
  DD: 入场费

DT: 化名 #1
DT: 化名 #2
  DD: 含义

DT: 食谱
  DD: 食材
  DD: 食材
  DD: 指导

一旦您开始真正思考，您会发现定义列表有许多实际应用，所以很少在代码中看到它们确实让人惊讶。

为什么定义列表没有更广泛地使用？

很难说……我认为可能是搜索引擎优化 (SEO) 是最主要的原因。人们知道（或者认为他们知道）标题标签会赋予内容额外的权重和重要性。使用得当，您的术语标签可以替代标题标签，我猜想人们认为这意味着他们的内容会获得更少的搜索引擎权重。我不会对此问题发表任何意见，因为我不是 SEO 天才，但我直觉认为，您永远不会因为代码标记良好而受到处罚。

另一个限制是，您不能在 <dt> 元素中使用块级元素。它在这一点上与标题元素（例如 <h1>）类似。（感谢 Paul O’Brien 的提示）

进一步阅读。

定义列表 - 被误用还是被误解？

演示和下载

查看演示   下载文件