使用 HTML 定义术语

如何标记非正式描述

在教科书中，关键词首次出现时，通常会将其加粗并立即定义。

HTML 同样采用此法，但因 HTML 并非视觉媒介，故不使用粗体。我们采用 <dfn> 标签——这是专用于标记关键词首次出现的特殊元素。需注意：<dfn> 标签应包裹待定义的词语，而非定义内容（定义内容包含整个段落）：

<p><dfn>Firefox</dfn> 是由 Mozilla 基金会创建的 web 浏览器。</p>

特殊用例：缩写

最好使用 <abbr> 对缩写词进行特殊标记，这样屏幕阅读器便能正确朗读它们，同时也方便你统一地处理所有缩写词。如同任何新关键词一样，缩写词应在首次出现时进行定义。

<p>
  <dfn><abbr>HTML</abbr>（超文本标记语言）</dfn>是用于在 web
  上为文档建立结构的描述性语言。
</p>

提升无障碍性

<dfn> 标记定义的关键词，并表明当前段落定义了该关键词。换言之，<dfn> 元素与其容器之间存在隐含关系。若需建立更正式的关系，或定义仅包含单句而非整段文字时，可使用 aria-describedby 属性将术语与其定义进行正式关联：

<p>
  <span id="ff">
    <dfn aria-describedby="ff">Firefox</dfn> 是由 Mozilla 基金会创建的 web
    浏览器。
  </span>
  你可以在 <a href="https://www.mozilla.org">mozilla.org</a> 下载它。
</p>

辅助技术常可利用此属性为特定术语查找文本替代方案。可在任何包含待定义关键词的标签上使用 aria-describedby（不仅限于 <dfn> 元素）。该属性通过 id 引用包含说明内容的元素。

如何构建描述列表

描述列表正如其名：由术语及其对应描述组成的列表（例如定义列表、词典条目、常见问题解答和键值对）。

描述术语需置于 <dt> 元素内，对应说明紧随其后，包含于一个或多个 <dd> 元素中。整个说明列表应由 <dl> 元素包裹。

简单示例

以下是描述一些食物和饮料种类的示例：

<dl>
  <dt>什锦饭</dt>
  <dd>以米饭为主料的主菜，通常包含鸡肉、香肠、海鲜及香料。</dd>

  <dt>寿喜烧</dt>
  <dd>日本特色料理，包括薄切肉片、蔬菜和面条，以清酒和酱油烹煮而成。</dd>

  <dt>基安蒂酒</dt>
  <dd>产自托斯卡纳的意大利干红葡萄酒。</dd>
</dl>

改进视觉输出效果

以下是图形浏览器显示前述列表的方式：

若需使关键词更醒目，可尝试加粗处理。请注意，HTML 并非视觉媒介；所有视觉效果均需借助 CSS 实现。此处需运用 CSS 的 font-weight 属性：

dt {
  font-weight: bold;
}

这产生了下面更易读的结果：

参见

• <dfn>
• <dl>
• <dt>
• <dd>
• 如何使用 aria-describedby 属性