HTML5中多了许多与文档结构相关的元素，以下是示例 (注释都在代码中了）：

HTML5页面：

 
  
  1. <!-- 以下这一行定义了这个html页面是html 5 --> 
  2. <!DOCTYPE html> 
  3.  
  4. <link rel="stylesheet" href="css/common.css" type="text/css"> 
  5. <body> 
  6. <h1>HTML5 文档结构DEMO</h1> 
  7.  
  8. <!-- 这里用nav定义了全局页面导航 --> 
  9. <nav> 
  10.  <ul> 
  11.    <li><a href="/">主页</a></li> 
  12.    <li><a href="/myaccount">我的账号</a></li> 
  13.  </ul> 
  14. </nav> 
  15.  
  16. <!-- article元素代表了文档，页面或者应用程序中独立的完整的并且可以被外部引用的内容 --> 
  17. <article> 
  18.  
  19.    <!-- 这个header元素具有引导和导航作用，网页中可以拥有任意数目的header--> 
  20.     <header> 
  21.      
  22.     <!-- 如果一个区块有多个标题，那么hgroup则可以为这些标题/子标题分组 --> 
  23.     <hgroup> 
  24.     <!-- 一般标题都应该放在header元素中 --> 
  25.     <h3>苹果</h3> 
  26.     <h4>好吃的苹果</h4> 
  27.     </hgroup> 
  28.     <p>发表日期： 
  29.     <time pubdate datetime="2012/5/5">2012/5/5</time> 
  30.     </p> 
  31.      
  32.     <!-- 这里的nav定义了页内导航，它的超链接指向了页面内某块，用id选择器语法标识 --> 
  33.     <nav> 
  34.     <ul> 
  35.    <li><a href="#apple">苹果介绍</a></li> 
  36.  </ul> 
  37.     </nav> 
  38.     </header> 
  39.      
  40.     <!-- 这块是这个article的正文部分 --> 
  41.     <p> 
  42.     <b>苹果</b>，苹果1，苹果2，苹果3，苹果4 
  43.     </p> 
  44.  
  45.      
  46.     <!-- 这里的section元素表明对页面的内容进行分块，它不是article(强调独立)，它只是article的内容块（强调分块），它也有标题和内容 --> 
  47.     <!-- section元素可以加id,这样可以被引用，比如超链接的指向 --> 
  48.     <section id="apple"> 
  49.     <!-- section也有标题而且推荐使用标题 --> 
  50.      <h3>评论</h3>      
  51.      <!-- 这里演示了article的嵌套 ，所以下面部分的article表示局部内容，而不是整体内容，它作为section的内容部分--> 
  52.      <article> 
  53.         <header> 
  54.          <h4>发布者：charles.wang</h4> 
  55.          <p> 
  56.          <!-- time元素是HTML5中新增的元素，表示24小时中的某个时刻或者时期，允许带时差 --> 
  57.          <!-- datetime属性不会显示在网页中，但是会被浏览器读到，日期和时间用T分隔，时间可以带时差(+ -号） --> 
  58.          <!-- pubdate属性代表了这article的发布时间，这个属性是可选的 --> 
  59.           <time pubdate datetime="2012-5-5T8:00-09:00"> 
  60.                1小时前 
  61.           </time> 
  62.          </p> 
  63.         </header> 
  64.         <p> 
  65.         我喜欢苹果，因为很好吃 
  66.         </p> 
  67.          
  68.      </article> 
  69.       
  70.      <article> 
  71.       <header> 
  72.       <h4>发布者：charles.wang</h4> 
  73.        <p> 
  74.           <time pubdate datetime="2012-5-5T8:00-09:00"> 
  75.                1小时前 
  76.           </time> 
  77.          </p> 
  78.       </header> 
  79.       <p> 
  80.       我喜欢苹果那种红彤彤的感觉 
  81.       </p> 
  82.       
  83.      </article> 
  84.           
  85.     </section> 
  86. </article> 
  87.  
  88. <!-- footer表示为上层内容区块或者根区块做一个页脚，footer个数不受限制，article,section,全局都可以设置footer --> 
  89. <footer> 
  90. <ul> 
  91. <li>版权信息:Charles</li> 
  92. <li>站点地图</li> 
  93. <li>联系方式</li> 
  94.  
  95. <!-- address用于在文档中呈现联系信息 --> 
  96. <address> 
  97.  <a title="文章作者：Charles"  href="http://supercharles888.blog.51cto.com">Charles</a> 
  98.  发表于<time datetime="2012/5/5">2012年5 月5日</time> 
  99. </address> 
  100. </ul> 
  101. </footer> 
  102.  
  103. </body> 
 
  
CSS页面：
 
  
 
 
  
 
  
  1. /********************************************************************************** 
  2. * @CopyRight: Charles Wang (Tech Lead) 
  3. * mailto: charles_wang888@126.com 
  4. * This file is only for studying purpose instead of commercial purpose 
  5. * 
  6. **********************************************************************************/ 
  7. @CHARSET "UTF-8"; 
  8.  
  9. /* 
  10. * 追加block声明，让浏览器页面当使用这些HTML5新增元素时候都使用块方式显示 
  11. */ 
  12. article,aside,dialog,figure,footer,header,legend,nav,section {display:block;} 
  13.  
  14. /* 
  15. * 其他样式，也就是为每个元素单独定义样式 
  16. */ 
  17. nav{float:left; width:20%;} 
  18. article{float:right; width:79%;} 
  19. header{display:block; color:yellow; text-align:left;} 
  20. article header{color:blue; text-align:left;} 
 
  
最后效果图：