網頁設計中典型的header代碼結構
2024-07-11 08:42:49
供稿：網友
頁面中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
