共计 2988 个字符，预计需要花费 8 分钟才能阅读完成。
前端工程师的招聘中，经常有这样的要求：对 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 那些事儿
