Blog - wingsico

最近代码写的较少了,于是回顾了一下自己以前的代码,看了一看自己第一次写的网页——百度首页,许多标签混用,无意义的div标签嵌套,img无alt属性,class命名(拼音首字母)之类的,极其缺失语义化以及结构化。 自己步入前端也有一年了,自己在写代码的时候也总是有意无意的使用div标签,甚至心里有一种这样的想法:

标题干嘛要用h1~h6啊,我并不想要标题加粗,直接用p吧,还省事,不要去设置css。什么header、footer完全没必要啊,又没有加任何特殊的样式。

在之后了解过一些html语义化之后才知道之前的这些想法有多么肤浅和愚蠢,但在之前的认知中中,对于语义化的认识也仅仅是这样:

语义化就是为了让标签做他该做的事情,使结构更加清晰,方便代码的阅读和维护。

但在经过一下午的学习过程中,我发现语义化并没有那么的简单。


HTML语义化历史

我们先来说说HTML吧,HTML一般被我们称之为网页,是与网络相关在一起的,当下时代网络是以 World Wide Web (Web, 万维网)为主导的,我们通过一串 URL 来定位到资源,通过特定的协议来访问以获取我们所需要的资源。这样的资源均是(?)通过HTML来展示的,所以HTML最初的目的就是为了发布web的资源内容以及方便人们进行索引。 目前,HTML主要用来:

  1. 发布文档(文本,表格,列表…)
  2. 通过超链接获取信息
  3. 建立用来访问远程服务的表单
  4. 发布web应用

但慢慢的随着Web规模不断的扩大,信息量之大已经不在人工处理的范围之内了,搜索引擎就应景而生,人们又设计了各种程序来对结构良好,索引好的内容进行处理和挖掘。这时候,为了能让机器更好的读懂web上的各种内容,语义化就显得越来越重要了。 最初的HTML是有一定的语义化的,比如说h1~h6是代指标题,img表示图片,table表示表格,p表示段落等等,但这些更多的只是为了让UA(User Agent)对这些元素进行更好的处理,并没有明确语义化的重要性,由于现在许多内容是为了网页的可视化设计的,机器对于这些是很难与有用的信息区分开来的,于是现在就提出了两种途径来解决这个问题:

  1. 提高技术,让机器越来越能够像人类思考,读懂人能够看懂,读懂的东西。
  2. 推广规范,让在编码之初就以一种能让机器读懂的方式来进行编码,即使用被广泛认可的语义信息来描述内容。(很显然,XML和HTML5就是往这个方向上进发)

这里引用一张图来表示: 第一条途径就是横轴,把AI的水平提升到人类的水平,第二条途径是纵轴,朝着语义化的方向前进,也就是万维网创始人 Tim Berners-Lee 爵士提出的美好愿景:语义网。

语义网:简单来说就是让一切内容和包括对关系的描述都成为 Web 上的资源,都可以由唯一的 URI 定义,语义明确、机器可读。

两条路都很艰难,但实际上我们正在以第二条途径进行努力,这也是HTML5出现的原因之一,删除了一些纯表现的标签,以及为一些标签丰富了语义,还有增加了许多富有语义的新标签。其实不仅是标签,同样的,许多属性,如rel,如role等等都是为了更好的去促成语义化的实现。 同时,HTML5并不是语义化规范的唯一依仗,除了 W3C 和 WHATWG 外,还有其他组织在为web语义化、标准化作出努力。

例如 microformats 社区以及 http://Schema.org 上都有对 HTML 以及 Microdata(http://www.w3.org/TR/html5/microdata.html) 规范的扩展词汇表,Google、Bing、Yahoo! 等搜索引擎以及各个主流浏览器都不同程度地接纳了其中定义的语义扩展,并应用在了生产中。

作者:顾轶灵 链接:https://www.zhihu.com/question/20455165/answer/15176745 来源:知乎


这些都是语义化的一些背景,那么我们可以从哪些方面来更好的语义化呢?

更好的语义化

  1. 尽量避免无意义的div嵌套

    <div> <!-- not good -->
        <div>
            <p>一段描述性的文字</p>
        </div>
    </div>
    
    <p>一段描述性的文字</p> <!-- good -->
  2. 每一个标签做他该做的事情

    <style>
      .head-title {
        font-weight: bold;
      }
    </style>
    <body>
      <div class="head-title"> 一个标题 </div> <!-- not good -->
    </body>
    
    <h2 class="head-title"> 一个标题 </h2> <!-- good -->
  3. 使用更加有语义化的标签

    <p><b>Warning!</b>There is a meeting...</p> <!-- not good -->
    
    <p><strong>Warning!</strong>There is a meeting...</p> <!-- good -->
  4. (3.5)清晰的了解每一个标签所代表的具体语义,不随意使用标签

  5. 更加清晰的class,id命名

    关于这一点,这里有个链接,专门说的是class的类名在语义化上的使用:http://www.oschina.net/translate/about-html-semantics-front-end-architecture 我自己的理解大概就是: 每一个类名都要有目的,有意义,不取无意义的类名,类名与内容解耦,往往大多数可重用的组件它的类名与内容是没有太大关联的,同时,我们应多使用“多类”模式,使它更有收缩性,以及可维护性,而不是把所有的样式堆积在一个类名上。


总结

经过一番学习,我对语义化有了更深层的认识:

语义化在目前来说更多的是为了让机器能读懂网页的内容,使HTML更加结构化、规范化,便于搜索引擎的爬虫的抓取,爬虫依赖标记来获取上下文以及关键字的权重,利于SEO;同时代码更加容易维护,方便他人阅读;在CSS加载失败后扔能保持一定的良好的结构,不会造成页面内容缺失等等。

由于现在已经步入HTML5的时代,了解新增以及改变的元素的语义显得十分重要,我查阅资料后找到一篇,对每一个语义化的元素都讲述的比较清楚,同时还介绍了目前在语义化比较火的微数据(micro data),写的很好,这里我就不一一列举语义元素了。

参考资料