摘要：邏輯學的語義學著眼點在于邏輯系統的語義解釋，是一個理想化的模型系統，不直接涉及自然語言。例如，通過幫助臨床研究中的決策，語義技術將跨機構橋接多種形式的生物和醫學信息。

前端工程師的招聘中，經常有這樣的要求：對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的一個很重要的特征就是語義網絡，其目的是以語義為綱領組織網絡資源。

除了經典的"Web of documents" W3C也致力于構建一個技術棧去支持"Web of data"，也就是數據庫中你的數據的順序。Web of data的終極目的在于：讓計算機做更多的有用的工作去開發系統，從而通過網絡去支持可以信賴的交互。W3C術語"Semantic Web"指的是對Web鏈接的數據。語義Web技術使人們可以在Web上創建數據倉庫，建立詞匯表，為需要處理的數據寫規則。Linked data 由類似RDF，SPARQL，OWL和SKOS。

Semantic Web是建立在數據上的Web，包括日期，標題和部分數字以及機制屬性以及任何其他的可以想象到的數據。RDF提供了發布和鏈接數據的基礎。多種技術允許你在文檔中嵌入數據（RDFa，GRDDL）或者暴露SQL數據庫里的數據，或者通過RDF文件嵌入。

有時候組織數據更重要更有價值。使用OWL（構建詞匯或者本體）以及SKOS（設計知識組織系統），通過附屬的意義enrich數據，這就可以允許更多的人或者更多的機器基于數據做更多的事。

查詢語言與數據庫息息相關。如果Semantic Web被當做一個全局的數據庫，那么理解為什么需要一門語言用來查詢數據就很輕松了。SPARQL就是Semantic Web的查詢語言。

在Semantic Web棧頂，可以找到引用--通過規則推理數據。W3C基于規則工作，主要通過RIF和OWL，集中精力在不同系統之間的規則語言和交換規則。

W3C工作在不同的產業，例如在醫療健康和生命科學，電子政務，提升合作能力的能力，研究和開發，以及通過語義化的Web創新革新的技術改革。例如，通過幫助臨床研究中的決策，語義Web技術將跨機構橋接多種形式的生物和醫學信息。

原文鏈接：Understanding why Semantic HTML is important, as told by TypeScript.

為了控制時間成本，我將只記錄自己認為重要的知識點，而不是通篇翻譯了。

當今有一種宣揚JavaScript，貶低HTML的趨勢，這是不正確的！

TypeScript引入了類型，確保我們debug，寫，讀的時候更加高效。

HTML若是同樣按照TypeScript這樣，嚴格按照類型碼標簽，會更加嚴格。

寫一個標題，很多標簽都可以實現，但是選擇header可以更加準確的代表我們的元素，也可以讓代碼可讀性更好。

充分利用好HTML這們語言，而不是到處都是div。

將HTML當做一門語言，選擇最最合適的代碼去表現自己的內容。

語義化好的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.

資料鏈接：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?

手冊地址：https://developer.mozilla.org...

可以查看另外一篇博文：關于WAI-ARIA那些事兒