前端工程师的雇用中，常常有如许的请求：对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那些事儿