html标签语义化

语义化的理解

标签语义化,最开始接触到这个概念的时候理解的是对于开发者来说,让html代码的可读性更强,编写更规范,方便于扩展和维护。让开发的人一眼就知道这个标签里面放的什么东西。后面经过了解,标签语义化的另一个好处是使得HTML对爬虫和机器人更加友好,方便爬虫抓取网页的重要部分的内容,改进搜索引擎的优化。

html本身是一种语言,在没有css的帮助下,html自身的结构也能很好的展示内容(虽然这也是默认的css在起作用),i标签和b标签都可以达到强调的效果,但是w3c标准中还对这些标签的使用作出了明确的区分。但是大家使用的时候往往都是很随意的。比如页面中随意嵌套的div,不规范的嵌套规则,往往这样的页面,即使达到了你想要展示的效果,日后维护起来也是比较恶心的。

HTML中新添加的标签语义更加明显,像addressfooterheadernav等等,单从标签的名字就可以看出标签应该被用来做什么,同时,爬虫也会根据页面中的这些具有语义的标签去判断和抓取页面的相关内容,并分析关键字的权重,文档规范化了,就更加有益于搜索引擎获取你页面的关键信息。

让HTML和CSS各司其职,是一件美好的实情,HTML5的核心思想就是语义,所以我们只看标签表达的含义,而不是表现出来的样式,样式交给CSS就可以了,而不是为了实现某种表现效果而强行使用某个标签。

显然HTML5中并没有废除所有没有语义的标签,有些时候可能所有的语义标签都不能满足我们的需求,我们就可以考虑使用divspan这样的没有语义的标签来达到我们的目的,有一个原则,就是如果有比divspan更加合适的标签,我们就不适用他们。

之前也见过一些问题,说的是针对盲人阅读的时候,开发应注意什么,当时并没有理解这个问题,现在看,html的语义化也在一定程度上会帮助盲人阅读器去更好的解析页面的内容,从而帮助用户更好的去理解你的页面。总而言之,所有的规范或者标准的制定,都是为了保证通用行,让所有人开发出来的东西都可以被所有人使用。

语义化标签的积累

  1. figure:用于规定独立的流内容(图像、图标、照片、代码等)。块级元素,有自带的margin值。
  2. figcaption:与figure配套使用,用于定义figure元素的标题。块级元素。
  3. nav:标记导航,网页中的链接群,nav中通常是ul无序列表,面包屑链接用ol有序列表。
  4. article:表示的是一个文档、页面、应用或是网站中的一个独立的容器,可以嵌套使用(要体现部分与整体的关系)。
  5. section:区块定义标签(表示的是文档或是应用的一个一般的块)。
  6. aside:定义侧栏标签(表示一部分内容与页面的主体并不是有很大的关系,但是可以独立存在)。
  7. footer:页脚标签(与
    标签对应的标签),用他可以实现的功能有:附录、索引、版权页、许可协议等。