h5新标签兼容写法

语义化！

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

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文件不能在其他位置调用，否则失效。