用 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;
}
這將產生下面略微更易讀的結果