HTML5：语义化的 div

HTML5规范新出的很多标签，比如header,footer等。先前，一般页面查看源代码时，使用看到满屏的DIV，HTML5的这些新标签实际上就相当于是有语义的div，在合适的位置，在合适的位置取代div，会使页面结构看起来更舒服。对SEO 也更友好。

还有一些标签如 time、source、mark 等，也可以认为是有语义的 span，不过支持HTML5的浏览器已经过这些标签做了处理，可以富显示。

除了一些画布，音乐视频等标签不算，有语义的标签如下

<header>    定义 section 或 page 的页眉。
<footer>    定义 section 或 page 的页脚。
<nav>    定义导航链接。
<section>    定义 section。
<article>    定义 article。
<aside>    定义页面内容之外的内容。

<details>    定义元素的细节。
<figcaption>    定义 figure 元素的标题。
<figure>    定义媒介内容的分组，以及它们的标题。
<hgroup>    定义有关文档中的 section 的信息。
<mark>    定义有记号的文本。
<source>    定义媒介源。
<summary>    定义 details 元素的标题。
<time>    定义日期/时间。

这些标签在Chorme,FireFox,Safari等浏览器中都已经支持，在IE9或以上的版本也支持，如果想兼容IE9以下的浏览器，可以插入一个JS去兼容，然后就可以放心的使用HTML5的新标签进行编码了.

header/footer　标签：比较适合页头尾，或是一个文章的头尾使用
nav 标签：　比较适合头部或侧面导航，分页等地方使用
article ：代表一篇文章或一个评论等。
aside ：可以用于显示与文章无关的东西，比如广告
section ：一个片断，可自由发挥，片段里面的内容大体都是描述同一类的东西。或是文章的一个小片段。

当然不要有强迫症，该用DIV就用DIV该用主义标签就用主义标签，比如页面上没有意义的容器，如果用这些有意义的标签去做的意义不大，所以不到看到DIV就用section或article代替~~，合理的代替可以使用页面结构看起来舒服。

<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

经过本人测试，在IE678上，基本显示没什么问题，JS,CSS都可以以新的方式去写，jquery等也可以正常运行

<!DOCTYPE html>
<html>
<head>
<!--[if lt IE 9]>
<script src=&quot;http://html5shim.googlecode.com/svn/trunk/html5.js&quot;></script>
<![endif]-->
<script src="http://code.jquery.com/jquery-1.6.4.js"></script>
<meta charset=&quot;utf-8&quot; />
</head>
<body>
<header>
  页头
   <hgroup>
     <h1>标题</h1>
     <h6>副标题</h6>
   </hgroup>
   <nav>
     导航区域
   </nav>
</header>
<section>
   片断
</section>
<article>
   文章
</article>
<aside>
   其它内容
</aside>
<footer>
  页尾
</footer>
</body>
<script>
$(document).ready(
    function(){
        $('nav').click(function(){alert(0)});
    }
);
</script>