HTML5的结构和语义——结构

转载 52CSS

    由于缺少结构,即使是形式良好的 HTML 页面也比较难以处理。必须分析标题的级别,才能看出各个部分的划分方式。边栏、页脚、页眉、导航条、主内容区和各篇文章都由通用的 div 元素来表示。HTML 5 添加了一些新元素,专门用来标识这些常见的结构: 
· section:这可以是书中的一章或一节,实际上可以是在 HTML 4 中有自己的标题的任何东西 
· header:页面上显示的页眉;与 head 元素不一样 
· footer:页脚;可以显示电子邮件中的签名 
· nav:指向其他页面的一组链接 
· article:blog、杂志、文章汇编等中的一篇文章 
我们来考虑一个典型的 blog 主页,它的顶部有页眉,底部有页脚,还有几篇文章、一个导航区和一个边栏,见代码

  1 典型的 blog 页面

   1: <html>
   2:   <head>
   3:     <title>Mokka mit Schlag </title>
   4:  </head>
   5: <body>
   6: <div id="page">
   7:   <div id="header">
   8:     <h1><a href="http://www.elharo.com/blog">Mokka mit Schlag</a></h1>
   9:   </div>
  10:   <div id="container">
  11:     <div id="center" class="column">               
  12:       <div class="post" id="post-1000572">
  13:         <h2><a href=
  14:       "/blog/birding/2007/04/23/spring-comes-and-goes-in-sussex-county/">
  15:       Spring Comes (and Goes) in Sussex County</a></h2>
  16:         
  17:         <div class="entry">
  18:           <p>Yesterday I joined the Brooklyn Bird Club for our
  19:           annual trip to Western New Jersey, specifically Hyper
  20:           Humus, a relatively recently discovered hot spot. It
  21:           started out as a nice winter morning when we arrived
  22:           at the site at 7:30 A.M., progressed to Spring around
  23:           10:00 A.M., and reached early summer by 10:15. </p>
  24:         </div>
  25:       </div>
  26:  
  27:  
  28:       <div class="post" id="post-1000571">
  29:         <h2><a href=
  30:           "/blog/birding/2007/04/23/but-does-it-count-for-your-life-list/">
  31:            But does it count for your life list?</a></h2>
  32:         
  33:         <div class="entry">
  34:           <p>Seems you can now go <a
  35:           href="http://www.wired.com/science/discoveries/news/
  36:           2007/04/cone_sf">bird watching via the Internet</a>. I
  37:           haven't been able to test it out yet (20 user
  38:           limit apparently) but this is certainly cool.
  39:           Personally, I can't imagine it replacing
  40:           actually being out in the field by any small amount.
  41:           On the other hand, I've always found it quite
  42:           sad to meet senior birders who are no longer able to
  43:           hold binoculars steady or get to the park. I can
  44:           imagine this might be of some interest to them. At
  45:           least one elderly birder did a big year on TV, after
  46:           he could no longer get out so much. This certainly
  47:           tops that.</p>
  48:         </div>
  49:       </div>
  50:  
  51:       </div>
  52:     
  53:     <div class="navigation">
  54:       <div class="alignleft">
  55:          <a href="/blog/page/2/">« Previous Entries</a>
  56:        </div>
  57:       <div class="alignright"></div>
  58:     </div>
  59:   </div>
  60:  
  61:   <div id="right" class="column">
  62:     <ul id="sidebar">
  63:       <li><h2>Info</h2>
  64:       <ul>
  65:         <li><a href="/blog/comment-policy/">Comment Policy</a></li>
  66:         <li><a href="/blog/todo-list/">Todo List</a></li>
  67:       </ul></li>
  68:       <li><h2>Archives</h2>
  69:         <ul>
  70:           <li><a href='/blog/2007/04/'>April 2007</a></li>
  71:           <li><a href='/blog/2007/03/'>March 2007</a></li>
  72:           <li><a href='/blog/2007/02/'>February 2007</a></li>
  73:           <li><a href='/blog/2007/01/'>January 2007</a></li>
  74:         </ul>
  75:       </li>
  76:     </ul>
  77:   </div>
  78:   <div id="footer">
  79:     <p>Copyright 2007 Elliotte Rusty Harold</p>
  80:   </div>
  81: </div>
  82:   
  83: </body>
  84: </html>

    即使有正确的缩进,这些嵌套的 div 仍然让人觉得非常混乱。在 HTML 5 中,可以将这些元素替换为语义性的元素,见代码2 用 HTML5编写的典型blog页面

   1: <html>
   2:  <head>
   3:     <title>Mokka mit Schlag </title>
   4:  </head>
   5: <body>
   6:   <header>
   7:     <h1><a href="http://www.elharo.com/blog">Mokka mit Schlag</a></h1>
   8:   </header>
   9:   <section>               
  10:       <article>
  11:         <h2><a href=
  12:         "/blog/birding/2007/04/23/spring-comes-and-goes-in-sussex-county/">
  13:          Spring Comes (and Goes) in Sussex County</a></h2>
  14:         
  15:         <p>Yesterday I joined the Brooklyn Bird Club for our
  16:         annual trip to Western New Jersey, specifically Hyper
  17:         Humus, a relatively recently discovered hot spot. It
  18:         started out as a nice winter morning when we arrived at
  19:         the site at 7:30 A.M., progressed to Spring around 10:00

	    	
		
	

发表评论

电子邮件地址不会被公开。 必填项已用*标注