用 HTML 定义术语
HTML 提供了多种方式来传达描述性语义，无论是行内还是结构化的词汇表。在本文中，我们将介绍在定义关键字时如何正确地进行标记。
| 预备知识 | 您需要熟悉如何创建基本的 HTML 文档。 |
|---|---|
| 目标 | 了解如何引入新关键字以及如何构建描述列表。 |
当您需要一个术语的定义时，您可能会直接查阅字典或词汇表。字典和词汇表正式地将关键字与一个或多个描述关联起来，如下例所示：
- 蓝色（形容词）
像晴朗的日子里的天空一样的颜色。“湛蓝的天空”
但我们也经常非正式地定义关键字，如下例所示：
Firefox 是由 Mozilla 基金会创建的网页浏览器。
如何标记非正式描述
在教科书中，当一个关键字第一次出现时，通常会将其加粗并立即定义。
我们在 HTML 中也这样做，只是 HTML 不是一个视觉媒介，所以我们不使用粗体。我们使用<dfn>，这是一个专门用于标记关键字第一次出现的特殊元素。请注意，<dfn> 标签围绕的是要定义的词语，而不是定义（定义由整个段落组成）。
<p><dfn>Firefox</dfn> is the web browser created by the Mozilla Foundation.</p>
注意：粗体还有一个用途是强调内容。粗体本身是一个 HTML 概念之外的概念，但有一些用于指示强调的标签。
特殊情况：缩写
最好使用<abbr>特别标记缩写，以便屏幕阅读器能够适当地朗读它们，并且您可以统一处理所有缩写。就像任何新关键字一样，您应该在缩写第一次出现时定义它们。
<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 属性将术语更正式地与其定义关联起来。
<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> 元素将整个描述列表括起来。
一个简单的例子
以下是一个描述食物和饮料种类的示例
<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 属性。
dt {
font-weight: bold;
}
这将产生下面略微更易读的结果