前端工程師的招聘中，經常有這樣的要求： 對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：
<code>interface dog {
name: string
age: number
isFluffy: boolean
}/<code>
語義化不好的TS和HTML：
<code>interface dog {
name: any
age: any
isFluffy: any
}/<code>
“…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.
閱讀更多 sandag 的文章
