先看一个传统的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>用于定义一个应该被标注或者高亮的区域，例如符合搜索条件的内容。
通过新的语义元素，不仅仅页面显得更简单，同时搜索引擎和人工辅助技术也会更容易理解页面。