新的HTML5语义元素

先看一个传统的HTML4的文档：

 <div class="header">
     <h1>My Site Name</h1>
     <h2>My Site Slogan</h2>
     <div class="nav">
         <ul><!-- Main Site Nav here --></ul>
     </div>
 </div>
 <div class="sidebar">
     <h3>Links Heading</h3>
     <ul><!-- Sidebar links --></ul>
 </div>
 <div class="main">
     <h4>Blog Post Title</h4>
     <div class="meta">
         Published by Joe on 01 May 2011 @ 12:30pm
     </div>
     <div class="post">
         <!-- Actual blog post -->
     </div>
 </div>
 <div class="footer">
     <ul><!-- Footer links --></ul>
     <!-- Copyright info -->
 </div>

=======分割线=======

以上这段代码能很好的运行，但是有两个问题：

1) 使用旧的标准，就必须使用自定义命名的class来区分不同的区域。这是没有问题的，但是命名的方式是由作者决定的。比如有人用head来表示头部，有人喜欢用heading，再或者有人用main来表示主体，但有人喜欢用body或者article。

2) 有些人喜欢用id而不是class来命名区块。

总的来说，就是传统的做法是对搜索引擎或者其它第三方软件不友好的，没有一个固定的，值得信赖的做法来区分每个区域。这就是为什么我们要使用新的语义元素。就像下面这样：

 <header>
     <hgroup>
         <h1>My Site Name</h1>
         <h2>My Site Slogan</h2>
     </hgroup>
     <nav>
         <ul><!-- Main Site Nav Here --></ul>
     </nav>
 </header>
 <nav>
     <h1>Links Heading</h1>
     <ul><!-- Sidebar links --></ul>
 </nav>
 <section>
     <article>
         <header>
             <h1>Blog Post Title</h1>
             <div class="meta">
                 Published by Joe on
                 <time datetime="2012-05-01T12:30+00:00">
                     01 May 2012 @ 12:30pm
                 </time>
             </div>
         </header>
         <section>
             <!-- Actual blog post -->
         </section>
     </article>
 </section>
 <footer>
     <ul><!-- Footer Links --></ul>
     <!-- Copyright info -->
 </footer>

=======分割线=======

1) <header> - 用于title和其它重要的细节（博客文章标题、永久链接、描述信息等）

2) <hgroup> - 标题的集合（<h1>到<h6>）

3) <nav> - 用于存放每个节点的链接。注意是重要节点的链接，例如主页链接或者表格目录等。

4) <section> - 用于定义一组内容，例如一个重要的表单或者一个主要的Wiki段落。Section能够拥有自己的header，navigation和footer。

5) <article> - 标记一个可以被重新发布的控件。例如RSS的内容、博客文章、评论等。Article也可以拥有自己的header，navigation和footer。

6) <time datetime="2012-05-01T12:30+00:00"> - 如果datetime属性被定义，则<time>的内容可以为任何值，但是如果没有定义datetime属性，则<time>内容必须是一个合法的日期或时间值。

7) <footer> - 通常放在页面或者section的底部，显示相关联的文章、链接或者版权声明等。

另外还有两个重要的元素是<aside>和<mark>。<aside>用于定义一个与主要内容无关的区域，例如一个广告或者浮动的窗体。<mark>用于定义一个应该被标注或者高亮的区域，例如符合搜索条件的内容。

通过新的语义元素，不仅仅页面显得更简单，同时搜索引擎和人工辅助技术也会更容易理解页面。