前端编程,语义化

什么是语义化?其实简单说来就是让机器可以读懂内容。

先随便扯扯。对于当前的 Web 而言,HTML 是联系大多数 Web 资源的纽带,也是内容的载体。在 Web 被刚刚设计出来的时候,Tim Berners-Lee 可能不会想到它现在会达到的规模以及深入到我们生活的那么多方面。也许起初的想法很简单:用来发布 Web 内容和资源的索引,方便人们查看。

但是随着 Web 规模的不断扩大,信息量之大已经不在人肉处理的范围之内了。这个时候人们开始用机器来处理 Web 上发布的各种内容,搜索引擎就诞生了。再后来,人们又设计了各种智能程序来对索引好的内容作各种处理和挖掘。所以让机器能够更好地读懂 Web 上发布的各种内容就变得越来越重要。

其实 HTML 在刚开始设计出来的时候就是带有一定的「语义」的,包括段落、表格、图片、标题等等,但这些更多地只是方便浏览器等 UA 对它们作合适的处理。但逐渐地,机器也要借助 HTML 提供的语义以及自然语言处理的手段来「读懂」它们从网上获取的 HTML 文档,但它们无法读懂例如「红色的文字」或者是深度嵌套的表格布局中内容的含义,因为太多已有的内容都是专门为了可视化的浏览器设计的。面对这种情况,出现了两种观点:

  1. 我们可以让机器的理解能力越来越接近人类,人能看懂、听懂的东西,机器也能理解;
  2. 我们应该在发布内容的时候,就用机器可读的、被广泛认可的语义信息来描述内容,来降低机器处理 Web 内容的难度(HTML 本身就已经是朝这个方向迈出的一小步了)。

我画的这个图,意思是说,内容的语义表达能力和 AI 的智能程度决定了机器分析处理 Web 内容能力的高低。上面观点 1 的方向是朝着人类水平的人工智能努力,而观点 2 的方向正是万维网创始人 Tim Berners-Lee 爵士提出的美好愿景:语义网。语义网我就不多说了,简单来说就是让一切内容和包括对关系的描述都成为 Web 上的资源,都可以由唯一的 URI 定义,语义明确、机器可读。显然,两条路都的终极目标都很遥远,第一条路技术上难以实现,而第二条路实施起来障碍太多。

我认为我们当前能够看得见摸得着的 Web 语义化,其实就是在往第二条路的方向上,迈出的一小步,即对已经有的被广泛认可的 HTML 标准做改进。我们刚开始意识到,我们必须回归内容本身,将内容本身的语义合理地表述出来,再为不同的用户代理设计不同的样式描述,也就是我们说的内容与样式分离。这样我们在提供内容的时候,首先要做的就是将内容本身进行合理的描述,暂时不用考虑它的最终呈现会是什么样子。

HTML 规范其实一直在往语义化的方向上努力,许多元素、属性在设计的时候,就已经考虑了如何让各种用户代理甚至网络爬虫更好地理解 HTML 文档。HTML5 更是在之前规范的基础上,将所有表现层(presentational)的语义描述都进行了修改或者删除,增加了不少可以表达更丰富语义的元素。为什么这样的语义元素是有意义的?因为它们被广泛认可。所谓语义本身就是对符号的一种共识,被认可的程度越高、范围越广,人们就越可以依赖它实现各种各样的功能。

HTML5 并非 Web 语义唯一倚仗的规范,除了 W3C 和 WHATWG 外,还有其它的组织在为扩展、标准化 Web 语义做着贡献。只要有浏览器厂商、搜索引擎原意支持,它们的规范一样可以成为通用的基础设施。例如 microformats 社区以及 http://Schema.org 上都有对 HTML 以及 Microdata(http://www.w3.org/TR/html5/microdata.html) 规范的扩展词汇表,Google、Bing、Yahoo! 等搜索引擎以及各个主流浏览器都不同程度地接纳了其中定义的语义扩展,并应用在了生产中。

下面举两个 Google 应用扩展语义的例子。
Google 的搜索结果,可以根据 microformats 的 hCard 语法从抓取的页面识别出人物信息:

也可通过网页内嵌的 Microdata 数据读取作品评分等信息:

关于 HTML5 的各个元素语义的描述,我之前做过一份 slides,上面提到的例子都是那里面的,也可以参考一下:Semantic HTML(http://justineo.github.com/slideshows/semantic-html/

时间: 2024-08-11 07:47:41

前端编程,语义化的相关文章

大多数前端工程师了解但并不擅长的HTML语义化

下面两段代码从HTML语义化的角度来看有什么问题? <!-- more --> <!-- 示例1 --> <label>作者: <input type="author" texture="deep pile"></label> <!-- 示例2 --> <body> <h1>[深度]扒开V8引擎的源码,我找到了你们想要的前端算法</h1> <h2>

web前端及HTML语义化的理解

1.什么是web前端 WEB前端是由网页设计与制作发展而来的,随着工作的细化,需要有人完成美工图到网页的制作,从而出现了WEB前端开发这个词.WEB前端开发主要是使用HTML.CSS.JavaScript技术,将美工提供的美工图转化为网页.同时,需要顾及SEO以及后台的数据.WEB前端,相当于是一个连接美工.后台以及用户的中间平台. 2.什么是HTML语义化? 1.)基本上都是围绕着几个主要的标签,像标题(H1~H6).列表(li).强调(strong em)等等 2.)根据内容的结构化(内容语

前端工程师必须要知道的SEO技巧(2):制作比设计还要漂亮的代码(内容和语义化代码)上

前言:现在的网站设计,大多数不仅仅要求美观,前端代码往往发挥着重要的作用.这意味着很大一部分搜索引擎优化或搜索引擎优化责任应该落在设计师身上.然而,有大量的网页设计师不理解这个问题以及如何在建立一个网站初期就达到是完全的搜寻引擎优化.当然,要达到这个高度,肯定离不开学习.需要花费时间使用. 一.制作比设计还要漂亮的代码(语义化代码)其实就是在适当的位置使用适当的代码. 接下来,我举几个例子就能明白: H1~H6标签多用于标题. UL标签多用于无序列表. OL标签多用于有序列表. DL标签多用于定

经典总结!语义化HTML和前端架构

这是一篇我喜欢的思想,经验,理念,以及过去几年中我所试验的理念的集合.它覆盖了HTML语义,前端架构的组件和方法,类命名模式,和HTTP内容压缩. 我们不会停止探索而我们一切探索的终点将会到达我们出发的地方于是我们第一次认识了这个地方. T.S. Eliot — “一人”关于语义语义是对标记与符号之间的关系,以及它们的含义的研究.在语言学中,这主要是对语言中的符号(如单词,短语,或声音)意义的研究.在前端web开发的上下文中,语义大多是与元素,属性,和属性值(包括像Microdata之类的扩展)

语义化HTML和前端架构

覆盖了HTML语义,前端架构的组件和方法,类命名模式,和HTTP内容压缩. 我们不会停止探索而我们一切探索的终点将会到达我们出发的地方于是我们第一次认识了这个地方. T.S. Eliot — “小吉丁”关于语义语义是对标记与符号之间的关系,以及它们的含义的研究.在语言学中,这主要是对语言中的符号(如单词,短语,或声音)意义的研究.在前端web开发的上下文中,语义大多是与元素,属性,和属性值(包括像Microdata之类的扩展)的一致认同意义相关.这些认同意义通常在规范中被定义概念,它们可以帮助程

前端经典面试题:如何理解 HTML 语义化?

本文最初于 2018-09-21 发布于 知乎 ,后在 <重学前端> 专栏的学习中,重新复习整理,发布于 Github 上,并计划写一系列前端学习相关的文章.欢迎 star . HTML 语义化 简单来说,我们可以理解为:用正确的标签做正确的事情. 例如: 段落用 p 标签,标题用 h 系列标签,边栏用 aside 标签,主要内容用 main 标签.正确使用语义标签可以带来很多好处. 为什么要关注 HTML 语义化?(为什么要使用语义类标签?) 对人: 增强可读性,对开发者更友好,在没有 CS

后端程序员前端之路03--HTML语义化

目录 什么是HTML语义化? 为什么要语义化 常用标签的语义 一.什么是HTML语义化? 简单来讲就是:每个标签做自己的事,使得能够被机器直接读懂. 二.为什么要语义化? 1.更容易被搜索引擎收录. 2.方便其他类型设备解析(如:屏幕阅读器等) 3.便于团队开发和维护. 三.常用标签的语义 标签 含义 备注 <title> 网页标题 用于告诉用户和搜索引擎,这个网页的主要内容是什么.搜索引擎可以通过网页标题,迅速判断出网页的主题. <p> 文章的段落 默认样式中,段前段后都会有空白

好程序员web前端分享常见html5语义化标签

我们知道,创建结构清晰的页面可以建立良好的语义化基础,也降低了使用css的难度,下面总结了一些常用的语义化标签,有空慢慢更新,欢迎大家补充 语义化HTML:用最恰当的HTML元素标记的内容. 优点:1 提升可访问性:  2 S-EO:   3 结构清晰,利于维护: (HTML5旧的行内元素都被归类为短语内容) 通用容器:div——块级通用容器:span——短语内容无语义容器. 如果语义不合适,也不要霸王硬上弓,=.. =老实的用div吧. < title></title>:简短.描

前端编程提高之旅(二)----网站常见特效的jquery实现

最好的编程语言是逻辑,前端各种交互特效的实现多可以用jquery实现,特效可以纷飞,内在逻辑则基本不变.这一篇文章主要介绍jquery实现常见特效背后的逻辑.    1.通过类名获取元素集合    首先来看一个js原生代码不支持的方法,通过类来获取元素集合. document.getElementsByClassName=function(classname){ var retnode = []; var myclass = new RegExp('\\b'+classname+'\\b');/