之前就見過很多網(wǎng)站在側邊欄上使用<dl />標簽對來完成側邊欄欄目的布局，最近在研究dedecms的默認模板時，也發(fā)現(xiàn)該模板在大量的地方使用<dl></dl>標簽對來完成頁面的布局，比如模板首頁的欄目循環(huán)以及側邊欄的欄目都是用<dl></dl>標簽對來實現(xiàn)的。而在研究全球使用數(shù)最多的博客程序wordpress時，發(fā)現(xiàn)它的側邊欄卻是使用的是最常見的<ul></ul>列表來實現(xiàn)的。

同樣的布局<dl />與<ul />都可以實現(xiàn)，并且就最終的表現(xiàn)來看并不存在區(qū)別，那么這兩者之間到底有什么區(qū)別呢？或者說使用哪一個來完成布局才更為合理呢？

<ul />與<ol />是最常見兩種列表表現(xiàn)形式，這兩種列表最本質(zhì)上的區(qū)別就是<ul />指的是無序列表而<ol />指的是有序列表。最常見的兩種不同表現(xiàn)是：平常所見的新聞標題列表基本上都是由<ul />來完成布局的，而很多網(wǎng)站的側邊欄上會有一些新聞點擊數(shù)排行榜之類的列表，這個時候就需要使用到有序列表<ol />，因為可以很容易的通過<ol />標注出排行順序來。

回過頭來我們看wordpress側邊欄的結構代碼：

<div id=”sidebar”>
<ul>
<li><h2>欄目標題一</h2>
<ul>
<li>新聞標題一</li>
…
<li>新聞標題n</li>
</ul>
</li>
…
<li><h2>欄目標題n</h2>
<ul>
<li>新聞標題一</li>
…
<li>新聞標題n</li>
</ul>
</li>
</ul>
</div>

很顯然，這是一個<ul />嵌套<ul/>的結構，通過<h2 />去顯示欄目標題（補充一點：對于博客來說，就頁面中的內(nèi)容重要程度而言，這里并不適合使用<h2 />標簽來顯示欄目標題，<h2 />標簽應該是用在日志標題上的）。

很多使用<dl />來布局的網(wǎng)站的結構代碼如下：

<div id=”sidebar”>
<dl>
<dt>欄目標題一</dt>
<dd>
<ul>
<li>新聞標題一</li>
…
<li>新聞標題n</li>
</ul>
</dd>
…
<dt>欄目標題n</dt>
<dd>
<ul>
<li>新聞標題一</li>
…
<li>新聞標題n</li>
</ul>
</dd>
</dl>
</div>

這是一個復雜表現(xiàn)上的定義列表，與上一個結構代碼的最大的區(qū)別是使用<dt />來替代<h2 />標簽。簡單意義上的定義列表結構如下：

<div id=”sidebar”>
<dl>
<dt>標題一</dt>
<dd>內(nèi)容一</dd>
…
<dd>內(nèi)容n</dd>
…
<dt>標題n</dt>
<dd>內(nèi)容一</dd>
…
<dd>內(nèi)容n</dd>
</dl>
</div>

這種結構的代碼也可以表現(xiàn)出列表的形式，但事實上這種結構并不太適合做為一個列表來使用，這種簡單的<dl />更適合做為不同內(nèi)容段的描述。比如：

<dl>
<dt>我的照片</dt>
<dd>作者：攝氏度</dd>
<dd>相機：佳能400d</dd>
<dt>我的博客</dt>
<dd>作者：攝氏度</dd>
<dd>程序：wordpress</dd>
</dl>

于是我們可以理解為：<dl />標簽結構更多的是表現(xiàn)一種描述性的列表，它本身并不具備做為列表顯示的意義。當<dl />與<ul />或是<ol />標簽結構組合起來使用時，才能更好的表現(xiàn)出描述列表的作用。

之前的那個被指為不符合標簽語義的試驗《使用ul進行寬度固定的多行多列布局》，現(xiàn)在換成<dl />標簽來做是否就適合標簽語義化了呢？