关于HTML语义化

某天面试被问到HTML语义化的问题，晕了下，只答出方便代码维护，汗。。

于是仔细了解下

简单说，所谓语义化就是不要让 CSS 使一个 HTML 元素看起来就像另一个 HTML 元素，比如用<div>来代替<p>标记标题，或者用<div class="title">来代替<hx>。

1.语义和默认样式的区别，所谓默认样式是浏览器设定的常用tag的表现形式，比如看到<strong>就知道是强调，<hx>看起来就像标题。

2.语义化的好处，最主要的就是对搜索引擎的友好，有了良好的结构和语义你的网页内容自然容易被搜索引擎抓取，你网站的推广便可以省下不少的功夫。

首先，所有的标签都是有自己的语义的，下面给出一部分标签的语义：

div 语义：Division（分隔）
span 语义：Span（范围）
ol 语义：Ordered List（排序列表）
ul 语义：Unordered List（不排序列表）
li 语义：List Item（列表项目）

结构(html)才是重点，样式(css)是用来修饰结构的。所以，要先确定html，确定标签，再来选用合适的css。

一般来说，所有的标签都会有一个默认的样式，所以一个简单的判断网页标签语义是否良好的方法就是：去掉样式，看网页结构是否组织良好有序，是否仍然有很好的可读性。

另外，值得重点提及的是h标签，h标签的语意是标题，搜索引擎对这个标签比较敏感，特别是h1,和h2。一个语义良好的页面，h标签应该是完整有序没有断层的。也就是说，要h1,h2,h3,h4这样推下来，不要h1,h3,h4，漏掉h2。一个结构良好的网页，h标签可以组织起一个网页的大纲。

还有一点要提的就是语义化容易被有视觉障碍用户使用的屏幕阅读器识别。。搜索引擎跟屏幕阅读器差不多。。

OK，总结下，使用语义化HTML标记网页，你就可以制作更好的、针对残疾人和搜索引擎的可访问性的网页。好的语义标记有助于搜索引擎判断网页的话题，如果结构也好的话，你的网站就会排在前头啦!