網頁設計中典型的header代碼結構

2024-07-11 08:21:11

字體：大中小

來源：轉載

供稿：網友

頁面中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>