今天在珞珈山水BBS看到一个帖子,有同学建议学校宣传部门对武汉大学官网首页进行重构。这不禁让人感慨不已,前端技术一直都在不断向前发展,几年前流行的table框架现在已经被div+css所取代,web2.0时代的到来更是令javascript技术得到广泛应用,而当下HTML5、CSS3则正风起云涌一片蓬勃。语义化标签是HTML5引入的一个重要概念,目前现代浏览器都已经支持了这个特性,可惜的是IE系列9.0以下版本无法识别语义化标签,导致页面在这些版本IE下显示错乱。

语义化!

HTML5中新加入了更加具有语义的标签,比如 header, section, footer, figure等。为什么要进行语义化?最重要的可能还是为搜索引擎优化,让爬虫能更好地理解网页结构。前端工程师需要做的就是选择适合的标签,将内容转换成浏览器认识的语言。

HTML5网页的典型结构

HTML5网页的典型结构

而在当下,做语义化还存在障碍:

  • 除了专业的人外,没人会关注标签是否使用得有语义
  • HTML的标签还不足以表达所有可能的语义
  • 语义化会需要增加一些额外的代码

鬼(CSS森林)曾经说过,外行看热闹,内行看门道,我们写的页面并不是所有人都会去看源代码的,为什么还要注意那么多东西呢?用户只是看到了一小部分,我们是内容的传播者,我们尽可能的让更多的用户更容易的从互联网获取信息,同时这里还是给懂得点右键“查看源文件”的人布道。从自身发展来说,如果想在这个行业内有所建树,专业化是必须的。

解决方案

扯了那么多,还是回到我们的问题,IE9以下旧版本浏览器不支持新的语义化标签。一种解决方案就是用js将HTML5增加的标签创建出来,就像下面这样。

<script>
var html5Tags=['header' ,'footer','article','nav' ,'section','aside']
for(var i=0;i<html5Tags.length;i++){
    document.createElement(html5Tags[i]);
}
</script>

实际上已经有人这么做了并分享在Google code project上方便大家直接调用。于是,我们可以使用IE条件注释来调用这个js文件,这样像FireFox等非IE浏览器就会忽视这段代码,也就不会有无谓的http请求了。

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

以上代码一定要放在head部分,因为IE必须在元素解析前知道这个元素,所以这个js文件不能在其他位置调用,否则失效。

查看演示Demo

参考链接:
http://lefter.net/blog/ie_html5/
http://remysharp.com/2009/01/07/html5-enabling-script/