使用h5标签需要兼容，不使用没有标签进行语义化，如何取舍？兼容IE6,7,8，canvas，video

HTML5已向开发人员提供了很多新的标签，如section，nav，article，header和footer等。这些标签语义化程度高，会被经常使用，但在IE6，IE7，IE8和Firefox 2等老式浏览器中却不能识别和正常使用。

很多浏览器（比如Firefox 3.6和Safari4）解析的时候都会将div作为最外层的元素，然后div里面是一个识别不了的元素（section），它会在DOM中创建，并被作为一个行内元素存在。IE8不能识别article标签， 定义在标签上的CSS样式没有起作用。 在IE8中，<article>被解释成命名为<article />和</article />两个空的标签元素，与文章内容并列为兄弟节点。IE9之前的版本会认为section标签是一个错误，并直接将其忽略.当然，支持HTML5的浏览器比如IE9，Firefox4+，Safari5+会创建正确的DOM结构，然后这些标签会默认附带HTML5规范中定义的默认样式。那么，我们所面临的最大问题就是同样的代码在不同的浏览器中形成了不同的DOM结构，并且含有不同的样式。

或许会有很多人在质疑：为什么老式的浏览器不能识别这些标签？其实错不在浏览器，因为在那个时代根本不存在这种标签，所以不能正确识别出来，而这种不寻常的标签识别令DOM结构变得异常。对此，人们想出了很多在现阶段页面中使用HTML5元素的解决方案。

通过document.createElement（tagName）即可以让浏览器识别标签和CSS引擎知道该标签的存在。这个方法可以确保HTML5标签能在旧版本IE中对应创建DOM节点，然后可以对其应用样式。这个方法将HTML5块级元素设置成display:block，从而可以在各个浏览器中做到兼容。

在你的html的头部中引入

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

在你的CSS文件中加上以下代码

header,nav,article,section,aside,footer{display:block;}

这是对IE6的canvas兼容

<!--if lte IE 6]>　　<script src="http://letskillie6.googlecode.com/svn/trunk/letskillie6.zh_CN.pack.js"></script>　　<![endif]-->

所有浏览器对video的兼容

http://html5media.googlecode.com/svn/trunk/src/html5media.min.js

虽然有各种各样的方法可以解决html5对各浏览器的兼容，但是，需要修改的Web应用视图越多，你越有可能制造bug。将改变限制到一个视图也就限制了bug的出现，即使出现了bug，也可以减少你查找错误的范围。如果一个视图破相了，我可以知道这是因为我增加了一个section元素，而不是考虑是不是CSS文件或者是js文件修改来带的影响。

使用h5标签需要兼容，不使用没有标签进行语义化，如何取舍？