優質網頁小貼士

無序列表：你用過嗎？

列表的觀念

當網頁中的內容屬於某種列表時，你可以考慮使用無序列表（<ul>）來展示這些內容。這不僅能改進 HTML 代碼的可讀性，還能為某些原本沒有意義的內容賦予明確的意義。

未被廣泛使用的現狀

許多網站不喜歡使用無序列表來標記文檔。在這些網站上，你常會看到許多由 <hr> 元素分隔的 <div> 標籤，或由類似 |（豎線）或 •（•）的符號分隔的一堆 <a> 標籤。發生這種情況的最主要原因可能是 CSS 樣式表中 <ul> 元素的屬性（padding，bullets 等）。許多網頁作者發現對 <div> 之類熟悉的元素 應用 各種樣式要比從 <ul> 中將這些樣式 移除 更方便。再加上各種流覽器平臺對 默認樣式的不一致呈現 使得情況變得更複雜了。

幸運的是，目前絕大多數視覺化流覽器已經支援 CSS 樣式表，列表元素在這些流覽器中也統一了樣式，這樣一來就能避免傳統的 <div> 或 <span> 標籤的濫用了。延伸閱讀 部分列出的一些站點解釋了應如何操作。

使用無序列表的好處

沒有樣式表照樣起作用

類似 <div> 和 <span> 的元素除了把內容分塊外，在語義上毫無意義。它們所要表達的意義必須通過 CSS 樣式表作用在網頁流覽器上才能起作用。

而如果你將某些內容組織成列表，那麼它就能直接從列表標記上表達其意義，而不需要 CSS 樣式表的作用。某些只掃描網頁內容（並忽略 CSS 樣式表）的用戶代理，如純文本流覽器、文本轉換為語音的流覽器，甚至一些 搜索引擎機器人 就能識別出那些用列表組織的內容，並通過列表方式將其呈現（或朗讀）出來。

更好的易用性

將一系列鏈結（<a> 元素）直接放在一塊兒會導致文本流覽器一起顯示它們，這使得用戶難以選擇想要的鏈結。許多教程推薦在這樣的鏈結中插入某些符號，作為防止混淆的臨時解決辦法。同樣的問題發生在使用 <div></div> <div></div> 標籤顯示內容，使用 <hr> 標籤或 CSS 的 border 元素作為內容分隔線時。而這種方法可能無法給人以多個內容塊屬於同一個相關系列的印象。

如果對上述情況中的內容使用無序列表，就可以讓非視覺化流覽器將這些內容以列表的方式呈現出來，而不是亂糟糟的一堆鏈結或排成一行不便於查看的元素。有意義的內容分組將自動出現，不再需要你添加分隔符號號或使用 <hr> 元素。

這是一種好方法

列表的使用，能從語義上為意義相關的內容分組，即使你的 CSS 樣式表被忽略也沒有關係。在恰當的地方使用無序列表是構建一份好文檔的聰明選擇。

延伸閱讀

• The Listamatic! Tons of list-styling goodness. Also check out their great tutorials.
• Eric Meyer comments on Consistent List Indentation across browser platforms, Aug 2002.
• A detailed article on Taming Lists from A List Apart, Sept 2002.
• Lists in the HTML 4.01 Spec.

關於“優質小貼士”

The W3C 優質小貼士 是為網頁開發者和設計者提供的一些有用的小短文，由 W3C 的 Quality Assurance Interest Group 負責管理和輯寫。中文版由 ZDYX（張杜一雄）維護。

雖然這些小貼士都被小組成員認真審查過，但這只是我們向你提供的點滴技巧。請注意，它們 不能 被認為是 W3C 的技術規範。

學習更多的技巧，瞭解怎樣提交你自己的智慧點滴，以及閱讀其他的優質小貼士，盡在 小貼士索引。