使用 HTML 定义术语

¥How to mark informal description

在教科书中，当关键字第一次出现时，通常会将关键字加粗并立即定义它。

¥In textbooks, the first time a keyword occurs, it's common to put the keyword in bold and define it right away.

我们也在 HTML 中这样做，只是 HTML 不是视觉媒介，因此我们不使用粗体。我们使用 <dfn>，它是一个特殊元素，仅用于标记关键字的第一次出现。请注意，<dfn> 标签围绕要定义的单词，而不是定义（定义由整个段落组成）：

¥We do that in HTML too, except HTML is not a visual medium and so we don't use bold. We use <dfn>, which is a special element just for marking the first occurrence of keywords. Note that <dfn> tags go around the word to be defined, not the definition (the definition consists of the entire paragraph):

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

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

¥Note: Another use for bold is to emphasize content. Bold itself is a concept foreign to HTML, but there are tags for indicating emphasis.

¥Special case: Abbreviations

最好将 专门标记缩写 与 <abbr> 搭配使用，以便屏幕阅读器正确阅读它们，以便你可以统一操作所有缩写。就像任何新关键字一样，你应该在缩写词第一次出现时定义它们。

¥It's best to mark abbreviations specially with <abbr>, so that screen readers read them appropriately and so that you can operate on all abbreviations uniformly. Just as with any new keyword, you should define your abbreviations the first time they occur.

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

注意：HTML 规范确实使用 保留 title 属性 来扩展缩写。然而，这不是提供内联扩展的可接受的替代方案。title 的内容对用户完全隐藏，除非他们使用鼠标并且恰好将鼠标悬停在缩写上。规范适当 也承认这一点。

¥Note: The HTML spec does indeed set aside the title attribute for expanding the abbreviation. However, this is not an acceptable alternative for providing an inline expansion. The contents of title are completely hidden from your users, unless they're using a mouse and they happen to hover over the abbreviation. The spec duly acknowledges this as well.

¥Improve accessibility

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

¥<dfn> marks the keyword defined, and indicates that the current paragraph defines the keyword. In other words, there's an implicit relationship between the <dfn> element and its container. If you want a more formal relationship, or your definition consists of only one sentence rather than the whole paragraph, you can use the aria-describedby attribute to associate a term more formally with its definition:

<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。

¥Assistive technology can often use this attribute to find a text alternative to a given term. You can use aria-describedby on any tag enclosing a keyword to be defined (not just the <dfn> element). aria-describedby references the id of the element containing the description.

¥How to build a description list

描述列表正如他们所声称的那样：术语列表及其匹配描述（例如定义列表、词典条目、常见问题解答和键值对）。

¥Description lists are just what they claim to be: a list of terms and their matching descriptions (e.g., definition lists, dictionary entries, FAQs, and key-value pairs).

注意：描述列表为 不适合标记对话框，，因为对话并不直接描述说话者。这里是 标记对话框的建议。

¥Note: Description lists are not suitable for marking up dialog, because conversation does not directly describe the speakers. Here are recommendations for marking up dialog.

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

¥The terms described go inside <dt> elements. The matching description follows immediately, contained within one or more <dd> elements. Enclose the whole description list with a <dl> element.

¥A simple example

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

¥Here's a simple example describing kinds of food and drink:

<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> 描述交替使用。如果两个或多个术语连续出现，则以下描述适用于所有术语。如果连续出现两个或多个描述，则它们都适用于最后一个给定术语。

¥Note: The basic pattern, as you can see, is to alternate <dt> terms with <dd> descriptions. If two or more terms occur in a row, the following description applies to all of them. If two or more descriptions occur in a row, they all apply to the last given term.

¥Improving the visual output

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

¥Here's how a graphical browser displays the foregoing list:

如果你想让关键词更加突出，你可以尝试将它们加粗。请记住，HTML 不是一种视觉媒介；它是一种视觉媒介。我们需要 CSS 来实现所有视觉效果。CSS font-weight 属性正是你所需要的：

¥If you want the keywords to stand out better, you could try bolding them. Remember, HTML is not a visual medium; we need CSS for all visual effects. The CSS font-weight property is what you need here:

dt {
  font-weight: bold;
}

这会产生下面稍微更易读的结果：

¥This produces the slightly more readable result below:

¥Learn more

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