HTML5: 语义化的 div

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<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的新标签进行编码了.

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!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>