HTML <dl/>, <dt/> 與 <dd/> 的誤用

此篇文章最近更新時間為2010-10-25 12:49:33 目前共有5篇留言

關於作者 - JosephJ

任職於 Faria。喜好戶外運動、2008 年 5 月完成「跑步環島」。對於新技術跟程式碼有著強烈的偏執狂。

HTML <dl/>, <dt/> 與 <dd/> 的誤用

常常看到有開發者誤用 dl 這個標籤,今天又有位同事又被我抓包(做成表格)XD
雖然這個標籤非常基本,想一想還是寫篇文章端正視聽一下 :p

dl 的意義是 Definition List,中文是「定義清單

而清單是由一或多個 dt (可配多個 dd)與 dd 的搭配組成。

dt 的意義是 Definition Term,中文是「定義項目」。
dd 的意義是 Definition Description,中文是「定義描述」。

例如 Global Warming (全球暖化)的定義就是 Gradual increase in the earth's surface temperature.(地球表面溫度逐漸升高)。所以 Global Warming 就是 dtGradual increase in the earth's surface temperature. 就是 dd

這篇文章寫的很好:
My Other Christmas Present Is a Definition List
===
作者說,對話、硬體配備、電影角色、網站選單、表單的 Label 與欄位這幾種狀態,都不適合使用定義清單

另外考慮盲人用的 Screen Reader,會直接將 dt 與 dd 的兩個值念成 (dt.value) equales (dd.value)。例如上面的例子,Screen Reader 會念成「全球暖化、等於、地球表面溫度逐漸升高」。想想看你使用的 dd 是否通暢就可以決定啦 ;)

文章最後還補一句「Anything else is a crime against markup.」(錯誤用途是 Markup 之罪)
讓我想起 Hedger 提到 Nate Koechley 跟他說的「Don't pollute your code.」(不要污染你的程式)有異曲同工之妙啊 XD
===

HTML 是整份文件的結構,也是最基本且入門的部分、同時也是最重要的根基。
建議應該耐心地把所有 HTML 4 的標籤從頭到尾看過一次,有些經驗的花不到一個小時喔。

前端工程師,所在意的就是那些表面看不到的細節。


Comments

  1. 2013-02-05 11:50:09
    寫得很好啊~ 我懂了~哈
  2. 玉面羅剎 2011-04-07 16:32:13
    說的好呀~~~有時看到一些把網頁當平面在做的人,真的會覺得.........
  3. 裕波 2010-11-03 00:59:24
    这篇文章很给力呀
    这也是我一直想说的,但是没有想好怎么写出来
  4. Awoo~ 2010-10-26 13:32:31
    有 Echo 到 clay 的內心 = =+
  5. clayliao 2010-10-26 09:01:14
    "前端工程師,所在意的就是那些表面看不到的細節。" <-- 經典名句,劃線! :p
暱稱: 必填。
Email: 非必填。若填寫為不公開欄位,僅供站長參考聯繫。
內容: 必填。限 255 個字元以內。
驗證碼:
送出

Facebook Comment