About Tag “dl,dt & dd”

HTML <dl> <dt> 與 <dd> tags

HTML <dl> <dt> 與 <dd> 標籤是網頁內文的一種排版方式技巧,可製作出表格的效果,<dl>、<dt> 與 <dd> 標籤的層級不同,撰寫規則為 <dd></dd> 標籤被包含在 <dt></dt> 標籤內,而 <dt></dt> 標籤被包含在 <dl></dl> 標籤內,形成一個完整的清單組,清單中的每個項目都有項目標題以及項目描述,這樣的排版技巧在 HTML 網頁文案中經常使用到。

HTML dl dt dd 範例

<dl>
<dt>項目標題一</dt>
<dd>這裡是項目敘述一 …</dd>
<dt></dt>
<dd>這裡是項目敘述a …</dd>
<dt>項目標題二</dt>
<dd>這裡是項目敘述二 …</dd>
</dl>

以上範例輸出結果如

項目標題一
這裡是項目敘述一 …
/dt>

這裡是項目敘述a …
項目標題二
這裡是項目敘述二 …

 

Coffee
Black hot drink
Milk
White cold drink

 

原則上 <dl></dl> 不會特別呈現出效果,但在頁面上會宣告一個清單空間,讓每個項目能夠在空間中完整呈現,項目標題 <dt></dt> 與項目符號 <dd></dd> 是一組一組的搭配,其中項目符號預設會自動產生縮排的效果,由於這是本文通用的一種排版方式,所有主流的瀏覽器都支援 HTML dl dt dd 標籤。需注意的是 <dl></dl> 標籤不可以與 HTML table 標籤混用。

dl {
width: 100%;
overflow: hidden;
padding: 0.5%;
margin: 0
}
dt {
float: left;
width: 40%;
/* adjust the width; make sure the total of both is 100% */
padding: 0.5%;
margin: 0
}
dd {
float: left;
width: 60%;
/* adjust the width; make sure the total of both is 100% */
padding: 0.5%;
margin: 0;
}

Here is the example