网页设计中典型的header代码结构

【 tulaoshi.com - Web开发 】

页面中header部分一般位于最上端（有时根据需要也会位于某一侧，不管它在页面中的位置如何，在XHTML代码中它总是优于其它元素先加载），内容主要包括网站名称（Logo，次级标题可能是网站的一句口号等）和网站的导航部分。在推行Web标准的现代网络中，Web中对于header的代码结构似乎已经趋于稳定化。下面是一个典型的header代码结构：

div id="header" 
   h1dudo 博客/h1 
  ul 
        li首页/li 
       liCSS/li 
      liXHTML/li 
        liJavaScript/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来定义一个列表，dtdd说明附属关系。因此上面的header部分我们可以这样来写：

div id="header" 
   dl 
        dtdudo 博客/dt 
      dd首页/dd 
       ddCSS/dd 
      ddXHTML/dd 
        ddJavaScript/dd 
   /dl 
/div

如果你还有其它的内容要在header中出现，则可以配合ul、li一起使用：

div id="header" 
   dl 
        dtdudo 博客/dt 
      dd id="siteMenu" 
          ul 
                li首页/li 
               liCSS/li 
              liXHTML/li 
                liJavaScript/li 
           /ul 
       /dd 
       dd id="userMenu" 
          ul 
                li加入收藏/li 
             li设为首页/li 
             liEngling 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 
            h1dudo 博客/h1 
      /dt 
       dd id="siteMenu" 
          ul 
                li首页/li 
               liCSS/li 
              liXHTML/li 
                liJavaScript/li 
           /ul 
       /dd 
       dd id="userMenu" 
          ul 
                li加入收藏/li 
             li设为首页/li 
             liEngling Version/div 
         /ul 
       /dd 
   /dl 
/div 

友情提醒：本文纯属一家之言，水平有限，谬误难免，所以您在转载此文时一定要注明出自www.dudo.org 以免替我挨拍。

原文连接：http://www.dudo.org/article.asp？id=242