先看一个传统的HTML4的文档：
1 <div class="header"> 2 <h1>My Site Name</h1> 3 <h2>My Site Slogan</h2> 4 <div class="nav"> 5 <ul><!-- Main Site Nav here --></ul> 6 </div> 7 </div> 8 <div class="sidebar"> 9 <h3>Links Heading</h3> 10 <ul><!-- Sidebar links --></ul> 11 </div> 12 <div class="main"> 13 <h4>Blog Post Title</h4> 14 <div class="meta"> 15 Published by Joe on 01 May 2011 @ 12:30pm 16 </div> 17 <div class="post"> 18 <!-- Actual blog post --> 19 </div> 20 </div> 21 <div class="footer"> 22 <ul><!-- Footer links --></ul> 23 <!-- Copyright info --> 24 </div>
=======分割线=======
以上这段代码能很好的运行，但是有两个问题：
1) 使用旧的标准，就必须使用自定义命名的class来区分不同的区域。这是没有问题的，但是命名的方式是由作者决定的。比如有人用head来表示头部，有人喜欢用heading，再或者有人用main来表示主体，但有人喜欢用body或者article。
2) 有些人喜欢用id而不是class来命名区块。
总的来说，就是传统的做法是对搜索引擎或者其它第三方软件不友好的，没有一个固定的，值得信赖的做法来区分每个区域。这就是为什么我们要使用新的语义元素。就像下面这样：
1 <header> 2 <hgroup> 3 <h1>My Site Name</h1> 4 <h2>My Site Slogan</h2> 5 </hgroup> 6 <nav> 7 <ul><!-- Main Site Nav Here --></ul> 8 </nav> 9 </header> 10 <nav> 11 <h1>Links Heading</h1> 12 <ul><!-- Sidebar links --></ul> 13 </nav> 14 <section> 15 <article> 16 <header> 17 <h1>Blog Post Title</h1> 18 <div class="meta"> 19 Published by Joe on 20 <time datetime="2012-05-01T12:30+00:00"> 21 01 May 2012 @ 12:30pm 22 </time> 23 </div> 24 </header> 25 <section> 26 <!-- Actual blog post --> 27 </section> 28 </article> 29 </section> 30 <footer> 31 <ul><!-- Footer Links --></ul> 32 <!-- Copyright info --> 33 </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>用于定义一个应该被标注或者高亮的区域，例如符合搜索条件的内容。
通过新的语义元素，不仅仅页面显得更简单，同时搜索引擎和人工辅助技术也会更容易理解页面。