谈CSS布局中HTML标签语义化

很多人都在做前端，当然这里包括很多新手，也许在新手的想法就是在做布局的时候不要用font标签之类的就算是web标准了，这样一来，造成如今网上“div泛滥”，一看源文件，霍，除了div没其他标签了。

这里，我可以很负责的告诉大家，这不叫web标准，这叫“div+css”。名副其实的“div+css”。
也许有人会说，我用“div+css”做出来的页面完全表达出设计图的意图，浏览器都兼容，没有任何问题。
的确，你这样做出来的页面看起来是没任何问题，注意，这里说的是“看起来没任何问题”，仅此而已。

人是可以通过视觉的划分判断内容的语义，但搜索引擎看到的只是代码。搜索引擎只能通过标签来判断内容的语义。

那么我们为什么要注重语义呢，因为页面的很大一部分流量是来自搜索引擎的，要使页面尽可能地对搜索引擎友好，所以就要尽可能地使标签语义化。

div这个标签对搜索引擎来说只是起到一个分割内容的作用，并没有告诉浏览器这个标签里面的内容到底是干什么用的。所以，整个页面只有用div来布局的话，那这个页面对搜索引擎来说还不如一句话来的重要，因为搜索引擎不知道你这个页面的重点是什么、列表是什么、内容是什么等等。

所有的标签都是有语义的，我们来看一部分标签的语义：

div 语义：Division（分隔）
span 语义：Span（范围）
ol 语义：Ordered List（排序列表）
ul 语义：Unordered List（不排序列表）
li 语义：List Item（列表项目）
p 语义：paragraph marks（段落标记）
hx 语义：headword（标题）
…………

如果无视标签语义和默认样式，所有标签都用div，其实也是可以写出来视觉效果很好的页面，只要你灵活运用CSS。但是那样的话虽然视觉上达到了要求，但是整个页面一点语义都没有，搜索引擎还是看不懂。所以，要记住：

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

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

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

HTML虽然很简单，但是要用好也是很不容易的，越研究你会觉得越有意思。

本文转自 ZeroZ