资讯专栏INFORMATION COLUMN

如何理解语义(semantic)化?

array_huang / 1444人阅读

摘要:逻辑学的语义学着眼点在于逻辑系统的语义解释,是一个理想化的模型系统,不直接涉及自然语言。例如,通过帮助临床研究中的决策,语义技术将跨机构桥接多种形式的生物和医学信息。

前端工程师的招聘中,经常有这样的要求:对Web 语义化有深刻理解。那么到底什么才是深刻理解Web语义化呢?读完这篇博客你就知道了。

前端工程师们口里的web语义化,实际上是指HTML5标签的语义化
但是这并不完全正确,在W3C标准,有semantic web的详细介绍,我将结合W3C标准的介绍和其他资料,深入理解web语义化,而不仅仅停留在标签层面。
那么HTML的语义化就不重要了吗?显然不是,medium上有一篇很好的博客。

语义学与计算机科学的关系是什么?

semantic web是什么?

通过TypeScript理解为什么Semantic HTML很重要?

除了增强可读性,Semantic HTML还有哪些方面很重要?

HTML语义化标签参考手册

进一步增强Web语义化的WAI-ARIA

语义学与计算机科学的关系是什么

以下内容摘自维基百科:

一个逻辑系统通常由三个部分组成,即词汇部分、句法部分和基于模型论的语义部分。
所谓的词汇部分就是列举出一个形式系统所使用的所有符号,句法部分是这些符号的组合规则,规定什么样的符号序列可以是这个系统的句子,语义部分是对合格句子的解释,这样的解释通常是:在一个模型中进行的对真值条件推导。逻辑学的语义学着眼点在于逻辑系统的语义解释,是一个理想化的模型系统,不直接涉及自然语言。
互联网理论中讨论的Web 2.0的一个很重要的特征就是语义网络,其目的是以语义为纲领组织网络资源。
semantic web是什么?

除了经典的"Web of documents" W3C也致力于构建一个技术栈去支持"Web of data",也就是数据库中你的数据的顺序。Web of data的终极目的在于:让计算机做更多的有用的工作去开发系统,从而通过网络去支持可以信赖的交互。W3C术语"Semantic Web"指的是对Web链接的数据。语义Web技术使人们可以在Web上创建数据仓库,建立词汇表,为需要处理的数据写规则。Linked data 由类似RDF,SPARQL,OWL和SKOS。

Linked Data

Semantic Web是建立在数据上的Web,包括日期,标题和部分数字以及机制属性以及任何其他的可以想象到的数据。RDF提供了发布和链接数据的基础。多种技术允许你在文档中嵌入数据(RDFa,GRDDL)或者暴露SQL数据库里的数据,或者通过RDF文件嵌入。

Vocabulary

有时候组织数据更重要更有价值。使用OWL(构建词汇或者本体)以及SKOS(设计知识组织系统),通过附属的意义enrich数据,这就可以允许更多的人或者更多的机器基于数据做更多的事。

Query

查询语言与数据库息息相关。如果Semantic Web被当做一个全局的数据库,那么理解为什么需要一门语言用来查询数据就很轻松了。SPARQL就是Semantic Web的查询语言。

Inference

在Semantic Web栈顶,可以找到引用--通过规则推理数据。W3C基于规则工作,主要通过RIF和OWL,集中精力在不同系统之间的规则语言和交换规则。

Vertical Application

W3C工作在不同的产业,例如在医疗健康和生命科学,电子政务,提升合作能力的能力,研究和开发,以及通过语义化的Web创新革新的技术改革。例如,通过帮助临床研究中的决策,语义Web技术将跨机构桥接多种形式的生物和医学信息。

通过TypeScript理解为什么Semantic HTML很重要?

原文链接:Understanding why Semantic HTML is important, as told by TypeScript.

为了控制时间成本,我将只记录自己认为重要的知识点,而不是通篇翻译了。

当今有一种宣扬JavaScript,贬低HTML的趋势,这是不正确的!

TypeScript引入了类型,确保我们debug,写,读的时候更加高效。

HTML若是同样按照TypeScript这样,严格按照类型码标签,会更加严格。

写一个标题,很多标签都可以实现,但是选择header可以更加准确的代表我们的元素,也可以让代码可读性更好。

充分利用好HTML这们语言,而不是到处都是div。

将HTML当做一门语言,选择最最合适的代码去表现自己的内容

语义化好的web与语义化不好的web间的对比:

语义化好的TS和HTML:

interface dog {
  name: string
  age: number
  isFluffy: boolean
}

语义化不好的TS和HTML:

interface dog {
  name: any
  age: any
  isFluffy: any
}

“…to build for people and the long term, then simple, structural, semantic HTML was best — each element deployed for it’s intended purpose. Don’t use a div when you mean a p” — Jeffery Zeldman

Get to know the HTML elements available to you, and use the appropriate one for your content. Make the most it, like you would any language you choose to code with.

除了增强可读性,Semantic HTML还有哪些方面很重要?

资料链接:https://developer.mozilla.org...
下面这句话很重要!

HTML should be coded to represent the data that will be populated and not based on its default presentation styling. Presentation (how it should look), is the sole responsibility of CSS.

语义化标签有下面这些好处:

Search engines will consider its contents as important keywords to influence the page"s search rankings (see SEO)

Screen readers can use it as a signpost to help visually impaired users navigate a page

Finding blocks of meaningful code is significantly easier than searching though endless divs with or without semantic or namespaced classes

Suggests to the developer the type of data that will be populated

Semantic naming mirrors proper custom element/component naming

每次写标签时,问自己这样一个问题:
What elements best describe/represent the data that I"m going to populate?

HTML语义化标签参考手册

手册地址:https://developer.mozilla.org...

进一步增强Web语义化的WAI-ARIA

可以查看另外一篇博文:关于WAI-ARIA那些事儿

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/59220.html

相关文章

  • 如何理解语义(semantic)

    摘要:逻辑学的语义学着眼点在于逻辑系统的语义解释,是一个理想化的模型系统,不直接涉及自然语言。例如,通过帮助临床研究中的决策,语义技术将跨机构桥接多种形式的生物和医学信息。 showImg(https://segmentfault.com/img/bVbrJYw?w=758&h=420); 前端工程师的招聘中,经常有这样的要求:对Web 语义化有深刻理解。那么到底什么才是深刻理解Web语义化...

    CarlBenjamin 评论0 收藏0
  • Semantic UI 语义设计的前端框架

    摘要:是的灵魂是一款语义化设计的前端框架,为攻城师而制作的可复用的开源前端框架。特性弃用有歧义的表述是围绕自然交流语言而架构的,这使得开发更加直观易于理解。打开你的调试窗口提供了的跟踪调试,意味着你的组件能告诉你它在做什么以及它正在做什么。 UI是Web的灵魂!Semantic UI是一款语义化设计的前端框架,为攻城师而制作的可复用的开源前端框架。 showImg(http://segme...

    Big_fat_cat 评论0 收藏0
  • Semantic UI 语义设计的前端框架

    摘要:是的灵魂是一款语义化设计的前端框架,为攻城师而制作的可复用的开源前端框架。特性弃用有歧义的表述是围绕自然交流语言而架构的,这使得开发更加直观易于理解。打开你的调试窗口提供了的跟踪调试,意味着你的组件能告诉你它在做什么以及它正在做什么。 UI是Web的灵魂!Semantic UI是一款语义化设计的前端框架,为攻城师而制作的可复用的开源前端框架。 showImg(http://segme...

    zombieda 评论0 收藏0
  • 快速理解web语义

    摘要:代码示例语义化语义化语义化语义化语义化年月日小维语义化标签包括还有等。而没有语义化的元素如则推荐使用。语义化包含了标签语义化和命名语义化。 什么是Web语义化 Web语义化是指使用恰当语义的html标签、class类名等内容,让页面具有良好的结构与含义,从而让人和机器都能快速理解网页内容。语义化的web页面一方面可以让机器在更少的人类干预情况下收集并研究网页的信息,从而可以读懂网页的内...

    LiveVideoStack 评论0 收藏0
  • Semantic Element

    摘要:语义语义化标记,是指每种标记表示一种特定的内容形态,例如标题列表表格等。与之对应的概念,是样式标记。爬虫依赖于标签来确定上下文和各个关键字的权重。 Semantic Element 1.什么是语义化 根据内容的结构,选择合适的标签(代码语义化)便于开发者阅读。写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。 语义(semantic)  语义化标记,是指每种标记表示一种特定的内容形...

    scola666 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<