语义化的作用
语义化是最近几年经常被讨论的一个话题，在提倡Web标准化的今天，语义化越来越受到大家的重视，并且已经成为Web标准的一部分了。
为什么要语义化？初次接触这个概念的人一定会这么问。CSS森林和愚人码头都对此讲述了自己的观点。综合两者，我的看法是：语义化的的直接作用大多是让机器可以更好地理解我们的网页。我说的机器，可以是屏幕阅读器，可以是移动设备，可以是爬虫程序甚至是我们自己写的程序。
屏幕阅读器这个没有得到很多人重视，所以也没有很大说服力。但是后者几个应该没有人会不重视吧，许多手机Web浏览器都是把网页在服务器中解析，提取，压缩再返回手机客户端的，语义化的标签相当于一个公共的协议，可以让服务器更有效准确地提取目标内容。另外，语义化的网页还可以让爬虫程序更好地理解网页，对SEO有直接帮助。
其实，我认为上面的都是浮云，语义化网页真正伟大之处是促进信息的共享和传播。RSS的应用就是一个例子，RSS本身就是一个高度语义化的XML文档，同时它也是一个协议，大家都按照这个协议来提供网站的信息内容，这样，我们便可以按照同样的协议编写程序，使用这个程序来获取我们各自需要的信息，大大地促进了信息的共享和传播。
当然，语义化的作用不仅仅是这些，在《语义化的HTML结构到底有什么好处？》中还提到了，它对网页丢失样式呈现清晰结构，对于团队开发和维护也有重要作用。
HTML5中的语义化标签
扯了这么久，还没有说到重点。其实大家都应该知道了，在HTML5规范中提出了一系列语义化的标签元素，并且修改了部分已有的标签元素。在这篇文章中，我不会把所有的标签都逐一讨论，要详细了解的话，这里推荐两个链接：《HTML5 differences from HTML4》还有《WHAT DOES IT ALL MEAN?》.
HTML5中主要的新元素有：article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section（当然，除了这些，HTML5的新元素还有video和audio以及一些表单元素，这些标签因为太有内涵了，我后面会再另写文章独立讨论。），其实它们都是普普通通的标签，普通得跟div没什么两样，确实如此，但在我看来，在当今div泛滥的年代，这些语义化标签会让我们的网页显得血肉丰满。它们的使命，就是来秒杀div的。
接着，我们应该怎么使用这些新元素呢？对于已经支持HTML5的浏览器，直接尽情的使用。对于那些压根不认识HTML5的浏览器....就有些蛋疼了。不同浏览器对此反应不一。所有浏览器都会把未知元素当作行内元素来渲染。能渲染出来问题应该都不大了，但是HTML5的新标签并不是所有都是行内元素，article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section就应该以块元素来渲染，所以，我们应该在CSS中把它们重置为块元素。
关于IE们对未知元素解析的问题
这里，问题就出来了，IE9以下版本的浏览器对未知元素的某些操作会失效。我们举一个例子吧：
<article id="a">This is the content</article>
上面的代码在ie9之前的浏览器中，“不能应用样式”，假如说我们加上这样的css规则：article{color:red},里面的文本依然没有变化。
另外，如果我们也“不能获取和写入innerHTML”：alert(document.getElementById("a").inerHTML);输出一个空字符串。
这类型的问题很多人都知道，也有很多人给出了相应的解释，“浏览器不能获取未知元素节点”,"所有未知元素所应用的样式都会被忽略"....诸如此类的解释。但是，我认为很多解释都是不全面的，甚至错误的。比较靠谱的是《WHAT DOES IT ALL MEAN?》一文的解释，但是我依然觉得不太严谨，下面我会阐述一下我的看法。
为了看清楚IE们是如何解释未知元素的，我继续使用上面的Demo，然后使用IE8的开发者工具查看Dom结构，源文件是这样的：
<!DOCTYPE HTML>
<html >
<head>
<title>Test</title>
</head>
<body>
<article id="a" >This is the content.</article>
</body>
</html>
- “未知元素不能应用样式“,"所有应用在未知元素的样式都会被忽略"。这两个说法其实是错误的，未知元素依然可以应用样式。那为什么{color:red}这些css规则对标签内的文本无效呢？看回到上面那张图就清楚了，原因就在于IE认为article标签是闭合标签，里面没有文本，那这个样式当然不起效果。但是，如果我们加上一个这样的样式：{display:block;margin:10px}，你就可以发现，样式产生作用了。
- ”不能获取和写入未知元素的innerHTML“，”不能取得未知元素节点“。这个两个说法同样是错误的。对于一个问题也不用多讲了，还是那个原因，article被解析成闭合标签，固然没有innerHTML，所以innerHTML属性只能是空字符串。对于后面一个问题，直接测试一下：alert(document.getElementsByTagName(”article").length);//输出1 很明显，浏览器是可以取得改节点的，只是有些结果不是正如我们想象一样而已。
说了这么久，目的就是要弄清楚为什么在IE9以下浏览器中，未知元素引发的一系列问题。下面说说解决方案：
在尚未开始解析未知元素之前，把它们用Javascript都createElement一下，问题就可以解决了。
解决的办法很简单，Remy Sharp已经把具体的代码精简化，我们可以在http://code.google.com/p/html5shiv/了解详细情况。所以，我们只要在IE9以下的浏览器的<head>标签内插入这段代码，便可以使用这些语义化标签了。
<!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->
参考资料
http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#linkTypes
http://www.diveintohtml5.com/semantics.html
http://www.w3.org/TR/html5-diff/#doctype
来源：https://www.cnblogs.com/vinqon/archive/2011/04/08/2031389.html