使用 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;
}

這會產生如下稍微易讀一些的結果

瞭解更多