前两天参加了公司组织的一个WD培训,有一节课讲了标签语义化,听了之后感觉特别有用,更正了我以前对HTML和CSS的错误看法。
首先说明的一点是,人可以通过视觉的划分判断内容的语义,搜索引擎看到的只是代码。搜索引擎只能通过标签来判断内容的语义。 以前我真的没有怎么过搜索引擎,现在开始比较在意了,因为页面的很大一部分流量是来自搜索引擎的,要使页面尽可能地对搜索引擎友好,所以就要尽可能地使标签语义化。

  以前以我对web开发的粗浅理解,觉得写一个好的符合标准的页面只需要把结构和表现分离,然后不要使用table,font等标签就行了,至于通篇都是div我也不会觉得有什么问题,因为CSS很强大。但是,所有的标签都是有自己的语义的,下面给出一部分标签的语义:

  div 语义:Division(分隔)

  span 语义:Span(范围)

  ol 语义:Ordered List(排序列表)

  ul 语义:Unordered List(不排序列表)

  li 语义:List Item(列表项目)

  …………

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

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

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

  另外,值得重点提及的是h标签,h标签的语意是标题,搜索引擎对这个标签比较,特别是h1,和h2。一个语义良好的页面,h标签应该是完整有序没有断层的。也就是说,要h1,h2,h3,h4这样推下来,不要h1,h3,h4,漏掉h2。一个结构良好的网页,h标签可以组织起一个网页的大纲。
最新资讯
柳青:移动出行的渗透率只有3% 未来大有可为

柳青:移动出行的渗透率

在今日举行的花小猪媒体开放日上,滴滴出行总裁柳青分享
花小猪孙枢:希望满足更多用户需求 90后用户占六成

花小猪孙枢:希望满足更

滴滴今日举行花小猪打车媒体开放日,花小猪打车总经理孙
欧盟最新规定!大型科技公司或需交出包括广告档案等数据

欧盟最新规定!大型科技

据悉,欧盟数字事务主管Margrethe Vestager周五表示,根据
港交所:推出蚂蚁科技集团股份有限公司股票期权

港交所:推出蚂蚁科技集

港交所:推出蚂蚁科技集团股份有限公司股票期权。
特斯拉供应商LG化学获准分拆电池业务,拟一年内上市

特斯拉供应商LG化学获

据报道,LG化学(LG Chem)股东今日投票,批准了公司分拆电池
三六零:前三季度营收为79.74亿元,同比下降16.26%

三六零:前三季度营收为

三六零发布2020年第三季度财报。财报显示,前三季度,三六
最新文章
浅析html webpack plugin插件的使用教程

浅析html webpack plu

这篇文章主要介绍了html webpack plugin插件的使用教
HTML转PDF的纯客户端和纯服务端实现方案

HTML转PDF的纯客户端

这篇文章主要介绍了HTML转PDF的纯客户端和纯服务端实
HTML行内元素与块级元素有哪些及区别详解

HTML行内元素与块级元

这篇文章主要介绍了HTML行内元素与块级元素有哪些及区
html+css 实现图片右上角加删除叉、图片删除按钮

html+css 实现图片右

这篇文章主要介绍了html+css 实现图片右上角加删除叉
详解iframe的src指向的内容不刷新的解决办法

详解iframe的src指向

这篇文章主要介绍了详解iframe的src指向的内容不刷新
浅析HTML 悬浮float的用法

浅析HTML 悬浮float的

float的用途比较广, 本文主要给大家介绍HTML 悬浮floa