前两天参加了公司组织的一个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标签可以组织起一个网页的大纲。
最新资讯
传iPhone 12 mini停产?谈"小屏机必死"为时尚早

传iPhone 12 mini停产

苹果于去年年底正式发布了iPhone 12系列手机,值得注意
1月国内动力电池装车量增长近三倍 这几家企业进入前十

1月国内动力电池装车

国内动力电池企业的装车量,已连续七个月实现同比增长。
人民日报:治理数字劳务平台需加强国际政策协调

人民日报:治理数字劳务

全球数字劳务平台蓬勃发展为劳动者和企业带来新机遇与
疫情下的网恋:74.0%受访单身青年每天要花1小时以上云交友

疫情下的网恋:74.0%受

由于疫情影响,少外出、少接触、避免人群扎堆儿等是过去
人民日报:个人信息泄露招来“花式”骗局

人民日报:个人信息泄露

网络平台和网站经营者要真正落实治理责任,严密制度设计
过半受访单身青年指出“云交友”需注意网络人设滤镜

过半受访单身青年指出

2001名18-35周岁单身青年进行的一项调查显示,56.4%的受
最新文章
详解HTML中字体使用line-height依然不能垂直居中解决办法

详解HTML中字体使用li

这篇文章主要介绍了详解HTML中字体使用line-height依
html直接引用vue和element-ui的方法

html直接引用vue和ele

这篇文章主要介绍了html直接引用vue和element-ui的方
在HTML里加载摄像头的方法

在HTML里加载摄像头的

这篇文章主要介绍了如何在HTML里加载摄像头,本文通过实
html父子页面iframe双向发消息的实现示例

html父子页面iframe双

这篇文章主要介绍了html父子页面iframe双向发消息的实
HTML用户注册页面设置源码

HTML用户注册页面设置

这篇文章主要介绍了HTML用户注册页面设置源码,代码简
当div设置contentEditable=true时,重置其内容后无法光标定位

当div设置contentEdit

这篇文章主要介绍了解决当div设置contentEditable=tru