使用 HTML 定义术语

HTML 提供了几种传达描述语义的方法，无论是内联还是作为结构化词汇表。在本文中，我们将介绍在定义关键字时如何正确地标记它们。

先决条件 您需要熟悉如何创建基本的 HTML 文档。
目标 学习如何引入新关键字以及如何构建描述列表。

当您需要定义某个术语时，您可能会直接查阅字典或词汇表。字典和词汇表正式地将关键字与一个或多个描述相关联，例如本例所示

蓝色 (形容词)

像晴朗天空的颜色。“晴朗的蓝天”

但我们也在不断地非正式地定义关键字，例如这里

Firefox 是 Mozilla 基金会创建的 Web 浏览器。

为了处理这些用例，HTML 提供了标签 来标记描述和被描述的词语，以便您的意思能够正确地传达给您的读者。

如何标记非正式描述

在教科书中，关键字首次出现时，通常会将其用粗体显示并立即进行定义。

我们在 HTML 中也这样做，只是 HTML 不是一种视觉媒体，因此我们不使用粗体。我们使用<dfn>，这是一个专门用于标记关键字首次出现的特殊元素。请注意，<dfn> 标签围绕着要定义的词语，而不是定义（定义包括整个段落）

html
<p><dfn>Firefox</dfn> is the web browser created by the Mozilla Foundation.</p>

注意：粗体的另一种用途是强调内容。粗体本身是 HTML 中一个陌生的概念，但有用于指示强调的标签。

特殊情况：缩写

最好使用特殊标记缩写，使用<abbr>，以便屏幕阅读器能够适当地读取它们，并且以便您可以统一操作所有缩写。与任何新关键字一样，您应该在缩写首次出现时对其进行定义。

html
<p>
  <dfn><abbr>HTML</abbr> (hypertext markup language)</dfn>
  is a description language used to structure documents on the web.
</p>

注意：HTML 规范确实为扩展缩写保留了title 属性。但是，这并不是提供内联扩展的可接受替代方案。title 的内容完全隐藏在您的用户面前，除非他们使用鼠标并且碰巧将鼠标悬停在缩写上。规范也承认了这一点。

提高可访问性

<dfn> 标记了已定义的关键字，并指示当前段落定义了该关键字。换句话说，<dfn> 元素与其容器之间存在隐式关系。如果您想要更正式的关系，或者您的定义只包含一个句子而不是整个段落，则可以使用aria-describedby 属性来更正式地将术语与其定义相关联

html
<p>
  <span id="ff">
    <dfn aria-describedby="ff">Firefox</dfn>
    is the web browser created by the Mozilla Foundation.
  </span>
  You can download it at <a href="https://www.mozilla.org">mozilla.org</a>
</p>

辅助技术通常可以使用此属性查找给定术语的文本替代方案。您可以在包含要定义的关键字的任何标签上使用aria-describedby（不仅仅是<dfn> 元素）。aria-describedby 参考包含描述的元素的id。

如何构建描述列表

描述列表顾名思义：术语及其匹配描述的列表（例如，定义列表、字典条目、常见问题解答和键值对）。

注意：描述列表不适合用于标记对话，因为对话不会直接描述说话者。以下是标记对话的建议。

被描述的术语位于<dt> 元素内。匹配的描述紧随其后，包含在一个或多个<dd> 元素中。将整个描述列表括在<dl> 元素中。

一个简单的示例

这是一个描述食物和饮料种类的简单示例

html
<dl>
  <dt>jambalaya</dt>
  <dd>
    rice-based entree typically containing chicken, sausage, seafood, and spices
  </dd>

  <dt>sukiyaki</dt>
  <dd>
    Japanese specialty consisting of thinly sliced meat, vegetables, and
    noodles, cooked in sake and soy sauce
  </dd>

  <dt>chianti</dt>
  <dd>dry Italian red wine originating in Tuscany</dd>
</dl>

注意：如您所见，基本模式是交替使用<dt> 术语和<dd> 描述。如果两个或多个术语连续出现，则以下描述适用于所有这些术语。如果两个或多个描述连续出现，则它们都适用于最后一个给定的术语。

改进视觉输出

以下是图形浏览器如何显示上述列表

如果您希望关键字更突出，可以尝试将它们加粗。请记住，HTML 不是视觉媒体；我们需要CSS 来实现所有视觉效果。CSS 的font-weight 属性是您在这里需要的

css
dt {
  font-weight: bold;
}

这会产生如下稍微易读一些的结果

了解更多