谈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

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。