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

HTML5页面：

 
    
     
     
  1.  
    2.  
     
  2. > 
    3.  
     
  3.  
    4.  
     
  4. <link rel="stylesheet" href="css/common.css" type="text/css"> 
    5.  
     
  5. <body> 
    6.  
     
  6. <h1>HTML5 文档结构DEMOh1> 
    7.  
     
  7.  
    8.  
     
  8.  
    9.  
     
  9. <nav> 
    10.  
     
  10.  <ul> 
    11.  
     
  11.    <li><a href="/">主页a>li> 
    12.  
     
  12.    <li><a href="/myaccount">我的账号a>li> 
    13.  
     
  13.  ul> 
    14.  
     
  14. nav> 
    15.  
     
  15.  
    16.  
     
  16.  
    17.  
     
  17. <article> 
    18.  
     
  18.  
    19.  
     
  19.     
    20.  
     
  20.     <header> 
    21.  
     
  21.      
    22.  
     
  22.      
    23.  
     
  23.     <hgroup> 
    24.  
     
  24.      
    25.  
     
  25.     <h3>苹果h3> 
    26.  
     
  26.     <h4>好吃的苹果h4> 
    27.  
     
  27.     hgroup> 
    28.  
     
  28.     <p>发表日期： 
    29.  
     
  29.     <time pubdate datetime="2012/5/5">2012/5/5time> 
    30.  
     
  30.     p> 
    31.  
     
  31.      
    32.  
     
  32.      
    33.  
     
  33.     <nav> 
    34.  
     
  34.     <ul> 
    35.  
     
  35.    <li><a href="#apple">苹果介绍a>li> 
    36.  
     
  36.  ul> 
    37.  
     
  37.     nav> 
    38.  
     
  38.     header> 
    39.  
     
  39.      
    40.  
     
  40.      
    41.  
     
  41.     <p> 
    42.  
     
  42.     <b>苹果b>，苹果1，苹果2，苹果3，苹果4 
    43.  
     
  43.     p> 
    44.  
     
  44.  
    45.  
     
  45.      
    46.  
     
  46.      
    47.  
     
  47.      
    48.  
     
  48.     <section id="apple"> 
    49.  
     
  49.      
    50.  
     
  50.      <h3>评论h3>      
    51.  
     
  51.       
    52.  
     
  52.      <article> 
    53.  
     
  53.         <header> 
    54.  
     
  54.          <h4>发布者：charles.wangh4> 
    55.  
     
  55.          <p> 
    56.  
     
  56.           
    57.  
     
  57.           
    58.  
     
  58.           
    59.  
     
  59.           <time pubdate datetime="2012-5-5T8:00-09:00"> 
    60.  
     
  60.                1小时前 
    61.  
     
  61.           time> 
    62.  
     
  62.          p> 
    63.  
     
  63.         header> 
    64.  
     
  64.         <p> 
    65.  
     
  65.         我喜欢苹果，因为很好吃 
    66.  
     
  66.         p> 
    67.  
     
  67.          
    68.  
     
  68.      article> 
    69.  
     
  69.       
    70.  
     
  70.      <article> 
    71.  
     
  71.       <header> 
    72.  
     
  72.       <h4>发布者：charles.wangh4> 
    73.  
     
  73.        <p> 
    74.  
     
  74.           <time pubdate datetime="2012-5-5T8:00-09:00"> 
    75.  
     
  75.                1小时前 
    76.  
     
  76.           time> 
    77.  
     
  77.          p> 
    78.  
     
  78.       header> 
    79.  
     
  79.       <p> 
    80.  
     
  80.       我喜欢苹果那种红彤彤的感觉 
    81.  
     
  81.       p> 
    82.  
     
  82.       
    83.  
     
  83.      article> 
    84.  
     
  84.           
    85.  
     
  85.     section> 
    86.  
     
  86. article> 
    87.  
     
  87.  
    88.  
     
  88.  
    89.  
     
  89. <footer> 
    90.  
     
  90. <ul> 
    91.  
     
  91. <li>版权信息:Charlesli> 
    92.  
     
  92. <li>站点地图li> 
    93.  
     
  93. <li>联系方式li> 
    94.  
     
  94.  
    95.  
     
  95.  
    96.  
     
  96. <address> 
    97.  
     
  97.  <a title="文章作者：Charles"  href="http://supercharles888.blog.51cto.com">Charlesa> 
    98.  
     
  98.  发表于<time datetime="2012/5/5">2012年5 月5日time> 
    99.  
     
  99. address> 
    100.  
     
  100. ul> 
    101.  
     
  101. footer> 
    102.  
     
  102.  
    103.  
     
  103. body> 
    104.  
    
 
    
CSS页面：
 
    
 
 
    
 
    
     
     
  1. /********************************************************************************** 
    2.  
     
  2. * @CopyRight: Charles Wang (Tech Lead) 
    3.  
     
  3. * mailto: [email protected] 
    4.  
     
  4. * This file is only for studying purpose instead of commercial purpose 
    5.  
     
  5. * 
    6.  
     
  6. **********************************************************************************/ 
    7.  
     
  7. @CHARSET "UTF-8"; 
    8.  
     
  8.  
    9.  
     
  9. /* 
    10.  
     
  10. * 追加block声明，让浏览器页面当使用这些HTML5新增元素时候都使用块方式显示 
    11.  
     
  11. */ 
    12.  
     
  12. article,aside,dialog,figure,footer,header,legend,nav,section {display:block;} 
    13.  
     
  13.  
    14.  
     
  14. /* 
    15.  
     
  15. * 其他样式，也就是为每个元素单独定义样式 
    16.  
     
  16. */ 
    17.  
     
  17. nav{float:left; width:20%;} 
    18.  
     
  18. article{float:right; width:79%;} 
    19.  
     
  19. header{display:block; color:yellow; text-align:left;} 
    20.  
     
  20. article header{color:blue; text-align:left;} 
    21.  
    
 
    
最后效果图：