如何理解语义(semantic)化？

前端工程师的招聘中，经常有这样的要求： 对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那些事儿