如何理解語義(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那些事兒