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

前端工程師的招聘中，經(jīng)常有這樣的要求：對Web 語義化有深刻理解。那么到底什么才是深刻理解Web語義化呢？讀完這篇博客你就知道了。

前端工程師們口里的web語義化，實際上是指HTML5標簽的語義化。
但是這并不完全正確，在W3C標準，有semantic web的詳細介紹，我將結(jié)合W3C標準的介紹和其他資料，深入理解web語義化，而不僅僅停留在標簽層面。
那么HTML的語義化就不重要了嗎？顯然不是，medium上有一篇很好的博客。

語義學與計算機科學的關(guān)系是什么？

semantic web是什么？

通過TypeScript理解為什么Semantic HTML很重要？

除了增強可讀性，Semantic HTML還有哪些方面很重要？

HTML語義化標簽參考手冊

進一步增強Web語義化的WAI-ARIA

以下內(nèi)容摘自維基百科：

一個邏輯系統(tǒng)通常由三個部分組成，即詞匯部分、句法部分和基于模型論的語義部分。
所謂的詞匯部分就是列舉出一個形式系統(tǒng)所使用的所有符號，句法部分是這些符號的組合規(guī)則，規(guī)定什么樣的符號序列可以是這個系統(tǒng)的句子，語義部分是對合格句子的解釋，這樣的解釋通常是：在一個模型中進行的對真值條件推導。邏輯學的語義學著眼點在于邏輯系統(tǒng)的語義解釋，是一個理想化的模型系統(tǒng)，不直接涉及自然語言。
互聯(lián)網(wǎng)理論中討論的Web 2.0的一個很重要的特征就是語義網(wǎng)絡，其目的是以語義為綱領(lǐng)組織網(wǎng)絡資源。

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

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

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

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

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

W3C工作在不同的產(chǎn)業(yè)，例如在醫(yī)療健康和生命科學，電子政務，提升合作能力的能力，研究和開發(fā)，以及通過語義化的Web創(chuàng)新革新的技術(shù)改革。例如，通過幫助臨床研究中的決策，語義Web技術(shù)將跨機構(gòu)橋接多種形式的生物和醫(yī)學信息。

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

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

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

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

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

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

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

將HTML當做一門語言，選擇最最合適的代碼去表現(xiàn)自己的內(nèi)容。

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

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