初學者指南：HTML dl、dt 和 dd 標籤

更新日期： 2024 年 10 月 15 日

在撰寫網頁內容時，有時候需要表達一系列關聯的項目，比如定義列表或詞彙解釋。

在 HTML 中，<dl>、<dt> 和 <dd> 標籤就是為此設計的。

這些標籤一起使用，可以非常方便地製作定義列表，讓你的內容更具結構性且易於理解。

這篇文章將介紹 <dl>、<dt> 和 <dd> 的基本用法，幫助你掌握它們的功能。

<dl>、<dt> 和 <dd> 的簡介

<dl> 標籤

<dl> 是 定義列表（Definition List） 的容器標籤，表示一組相關的項目。它的全稱是 “definition list”，意即定義列表。

在這個列表中，通常會有多個定義條目，並且每個條目都由一個定義詞和它的解釋組成。

<dt> 標籤

<dt> 是 定義術語（Definition Term） 的標籤，用來表示定義列表中的項目名稱，通常是詞語或標題。

它代表要被解釋或定義的詞彙。

<dd> 標籤

<dd> 是 定義描述（Definition Description） 的標籤，用於描述或解釋 <dt> 中的項目，通常是一段對詞語的解釋或者一些補充資訊。

基本語法

以下是一個簡單的例子，展示了如何使用 <dl>、<dt> 和 <dd> 來創建定義列表：

<dl>
  <dt>HTML</dt>
  <dd>一種用於創建網頁和應用程序的標記語言。</dd>

  <dt>CSS</dt>
  <dd>用於控制網頁的外觀和佈局的樣式表語言。</dd>

  <dt>JavaScript</dt>
  <dd>一種用於增加網頁互動性的程式語言。</dd>
</dl>

在這個例子中，<dl> 標籤包含了一個定義列表，列表中的每一個項目由 <dt> 和 <dd> 標籤組成，分別表示要定義的詞語及其解釋。

使用情境

詞彙定義

當你想要在網頁上提供專業術語的解釋時，<dl>、<dt> 和 <dd> 非常有用。

例如，如果你正在撰寫一篇有關科技的文章，可以用它們來定義各種專有名詞，幫助讀者更好地理解內容。

FAQ（常見問題解答）

這些標籤也可以用來製作 FAQ（常見問題解答）列表。

例如，問題可以用 <dt> 標籤標示，而答案則用 <dd> 標籤標示，這樣可以讓 FAQ 顯得清晰且有結構。

例子：FAQ 列表

<dl>
  <dt>什麼是 HTML？</dt>
  <dd>HTML 是一種用於創建網頁的標記語言。</dd>

  <dt>如何學習 CSS？</dt>
  <dd>你可以通過在線教程和實際操作來學習 CSS，例如 W3Schools 或 MDN。</dd>
</dl>

與其他列表標籤的對比

• <ul> 和 <ol>：這兩個標籤分別用於無序列表和有序列表，適合於需要列出多個獨立項目的情況，例如清單或步驟。而 <dl> 則是專門用於定義列表，適合於表達一對一的關係（如詞語及其定義）。
• <table>：有時候，表格也可以用來展示定義和描述，但 <dl> 更語義化，尤其是在需要明確標示詞語和定義的情況下更適合使用。

常見問題

結論

HTML 中的 <dl>、<dt> 和 <dd> 標籤是一組強大的工具，適合用於定義列表、詞彙解釋或 FAQ 等場景。

這些標籤不僅能讓網頁內容更具結構性，還能提高網頁的可讀性和可訪問性。

希望這篇文章幫助你了解，如何使用這些標籤，來創建具有良好語義的定義列表。

如果有其他問題，隨時告訴我，我們可以一起學習更多有關 HTML 的知識！