頁面中header部分一般位於最上端(有時根據需要也會位於某一側,不管它在頁面中的位置如何,在XHtml代碼中它總是優於其它元素先加載),內容主要包括網站名稱(Logo,次級標題可能是網站的一句口號等)和網站的導航部分。在推行Web標准的現代網絡中,Web中對於header的代碼結構似乎已經趨於穩定化。下面是一個典型的header代碼結構:
<div id="header">
<h1>dudo 博客</h1>
<ul>
<li>首頁</li>
<li>CSS</li>
<li>XHtml</li>
<li>JavaScript</li>
</ul>
</div>
這段代碼我們可以通過添加CSS代碼來實現多種布局樣式。
之所以說是典型的布局方式,因為它既夠簡潔又有語義。<h1></h1>說明了標簽內容在頁面中的作用和重要層次,<ul>、<li>無序列表列出了站內的所有主要內容分類,並通過<li>標簽說明它們是同級相鄰的,等等,諸如此類。查看更多本站CSS教程。
但是我們要考慮考慮。導航(也就是我們的menu)在頁面應該處於什麼樣的位置呢?和普通文本相比,它們肯定會處於更高級的位置之上。或者這麼說,導航(menu)應該和網站標題的關系更加親密一些。在我們上面的代碼結構中,我們看不出menu和<h>之間的關系來,或者說這些<ul>、<li>標簽與<h1>的關系和footer中的<ul>、<li>與<h1>的關系沒有任何區別。
因此我們要換一個方式來表達這個語義。我們很容易就會想到使用<dl>、<dt>、<dd>。<dl>來定義一個列表,<dt><dd>說明附屬關系。因此上面的header部分我們可以這樣來寫:
<div id="header">
<dl>
<dt>dudo 博客</dt>
<dd>首頁</dd>
<dd>CSS</dd>
<dd>XHtml</dd>
<dd>JavaScript</dd>
</dl>
</div>
如果你還有其它的內容要在header中出現,則可以配合<ul>、<li>一起使用:
<div id="header">
<dl>
<dt>dudo 博客</dt>
<dd id="siteMenu">
<ul>
<li>首頁</li>
<li>CSS</li>
<li>XHtml</li>
<li>JavaScript</li>
</ul>
</dd>
<dd id="userMenu">
<ul>
<li>加入收藏</li>
<li>設為首頁</li>
<li>Engling Version</div>
</ul>
</dd>
</dl>
</div>
這段代碼似乎更加飽滿一點。我們只從代碼就能看出標題與導航的關系,就是<dt>、<dl>的關系。
這似乎有一個問題:<h1></h1>沒有了!是的,我們為了表達標題和導航(menu)之間的關系放棄了<h1>的使用。這裡,我對是否要在網站標題中使用<h1>持懷疑態度。以我的觀點,<h1>不應該出現在頁面內容的外圍。而我們經常這麼去使用(我也經常去這樣使用)是為了提高你的“網站標題”在頁面中的重要程度。如果對於首頁來說可以這麼做的話,那麼對於子頁面來說,頁面的內容才是最重要的。有人這麼去理解<h1>的使用:網站標題處於最高層次,所以它應該使用<h1>,而頁面中的所有需要使用標題的地方都應該使用<h2>、<h3>等等。按這種說法,<h1>似乎只能在一個頁面中出現一次。首先,W3C對於<h>標題的規定中沒有這一條,其次,導航(menu)要比文章標題級別要高(因為網站的目錄就是:網站——分類(用menu來表示)——文章)所以導航應該用二級標題<h2>,充其量文章的標題也只能用個<h3>。這無疑是一種過度語義化,我們根據自己的理解賦予了標簽不具有的含義。觀看本站更多網頁制作教程。
要想突出標題的重要,只用一個方法足夠:在<head>中指定<title>...<title>的內容即可。因此,個人建議,在<header>中的設計代碼結構使用<dl>、<dt>、<dd>要比使用<h1>和<ul>更具語義。如果你覺得網站的標題部分就應該用<h1>來表示,那麼可以在<dt>中嵌套<h1>,合理的語義表達而增加標簽並不和代碼簡潔原則沖突。那麼上面的代碼
<div id="header">
<dl>
<dt>
<h1>dudo 博客</h1>
</dt>
<dd id="siteMenu">
<ul>
<li>首頁</li>
<li>CSS</li>
<li>XHtml</li>
<li>JavaScript</li>
</ul>
</dd>
<dd id="userMenu">
<ul>
<li>加入收藏</li>
<li>設為首頁</li>
<li>Engling Version</div>
</ul>
</dd>
</dl>
</div>
友情提醒:本文純屬一家之言,水平有限,謬誤難免,所以您在轉載此文時一定要注明出自www.dudo.org 以免替我挨拍。
原文連接:http://www.dudo.org/article.ASP?id=242