摘要：近來看面試題的時候，經常看到一個問題語義化是什么意思里面有標簽的含義。因為二者表示的含義不同。參考資料理解語義化語義化的革新語義化標簽語義化標簽探析

近來看面試題的時候，經常看到一個問題：HTML語義化是什么意思？
w3school里面有html標簽的含義。然而HTML5中對一些標簽進行了修改，由于不了解H5的新定義，就很容易弄錯標簽之間的意思。例如：既然i標簽是指斜體的意思，那么為什么font-awesome這類字體要用i標簽呢？這不是反語義化了嗎？除此之外，em和strong都是有強調的意思，又有什么區別呢？可能這個時候又會有人說，我用div+span+css就可以實現同樣的頁面效果，為什么非得用什么語義化的,

來表示呢？
問題很多，我們一個一個來看。
【均為學習過程中的個人理解，可能有誤。若有誤解請指出，謝謝！】
HTML語義化是什么？

語義化是指根據內容的結構化（內容語義化），選擇合適的標簽（代碼語義化），便于開發者閱讀和寫出更優雅的代碼的同時，讓瀏覽器的爬蟲和機器很好的解析。

為什么要語義化？

有利于SEO，有助于爬蟲抓取更多的有效信息，爬蟲是依賴于標簽來確定上下文和各個關鍵字的權重。

語義化的HTML在沒有CSS的情況下也能呈現較好的內容結構與代碼結構

方便其他設備的解析

便于團隊開發和維護

易混淆的HTML標簽詳解

i 標簽

The HTML  Element represents a range of text that is set off from the normal text for some reason, for example, technical terms, foreign language phrases, or fictional character thoughts. It is typically displayed in italic type.

i標簽效果，i標簽通常表示因為某種原因和正常文本不同的文本，例如專業術語、外語短語或排版用的文字。通常表現為斜體。

這也解決了我們之前提到的“為什么font-awesome這類字體是用i標簽”這個問題。

em 標簽

The HTML element emphasis   marks text that has stress emphasis. The  element can be nested, with each level of nesting indicating a greater degree of emphasis.

em標簽效果。em表示強調的文本。視覺上也是斜體的效果

strong標簽

The HTML Strong Element () gives text strong importance, and is typically displayed in bold.

strong標簽效果。以加粗的形式展現。表示這個文本的重要性，在HTML4中表示特別強調，HTML5中描述為“strong importance for its contents”

b標簽

The HTML  Element represents a span of text stylistically different from normal text, without conveying any special importance or relevance. It is typically used for keywords in a summary, product names in a review, or other spans of text whose typical presentation would be boldfaced. Another example of its use is to mark the lead sentence of each paragraph of an article.

b標簽效果。表示的文本風格不同于正常的文本，沒有表達任何特殊的重要性和相關性。通常用于關鍵字回顧，回顧中的產品名稱或者是其他需要表現為粗體的文本。另一個例子是標志每個段落的lead sentence。

在HTML4之前b元素是為了使文本變為黑體，HTML4后樣式信息已經被棄用，所以b元素的意義已經更改了。
不要使用b標簽來標記標題，標題使用

~

標簽。而且，當它們沒有必要顯示為粗體時，樣式表可以改變這些元素的默認樣式。
為了傳達更多的語義信息，可以給b元素添加class屬性，例如 b class ="lead"來標記每個段落的第一個句子。
如果沒有語義上的目的，使用css屬性的font-weight:bold來讓文本加粗會更好。

mark

The HTML Mark Element () represents highlighted text, i.e., a run of text marked for reference purpose, due to its relevance in a particular context. For example it can be used in a page showing search results to highlight every instance of the searched-for word.

mark的效果如下圖。表現為高亮文本。例如我們在網頁上查找關鍵字時，找到的結果就會以高亮的形式展現。

不要使用mark元素來實現語法高亮，而是用span元素。
mark元素通常是表示跨越不同的上下文中的相關文本。

HTML5新標簽

section

表示文檔中的一個區域（或節），比如，內容中的一個專題組，一般來說會有包含一個標題（heading）。一般通過是否包含一個標題 (
-
 element) 作為子節點來辨識每一個
。一般來說，一個 
 應該出現在文檔大綱中。

artical

元素表示文檔、頁面、應用或網站中的獨立結構，其意在成為可獨立分配的或可復用的結構，如在發布中，它可能是論壇帖子、雜志或新聞文章、博客、用戶提交的評論、交互式組件，或者其他獨立的內容項目。

不同標簽的區別 em vs i

雖然em標簽也是顯示為斜體的效果，但不能說因為效果一樣就使用i標簽來代替em標簽。因為二者表示的含義不同。
舉個例子。em標簽：just do it already!
那么一個人或者一個軟件在讀這句話時，就會以強調加重的語氣來讀do這個單詞。
對于i標簽：The word the is an article。那么在這句話中斜體并沒有強調的語氣。只是表明the是一個article，而不是我們平時的冠詞。

em vs strong

在HTML4中，strong一般指的是更強的強調。HTML5中strong表示的是內容的重要性。em被用來改變一個句子的含義，例如" I love carrots" vs " I love carrots"。而strong通常用來給部分句子增加重要性。例如"Warning!This is very dangerous"

strong vs b

strong 和 b 算是最相似的兩個元素了。那么二者之間的差別。strong表示的是一種邏輯狀態，而bold表示的是物理狀態。邏輯狀態是從內容中分離出來，以各種不同的形式來展現，可能你想標記為紅色或者下劃線或者其他，那么改變strong的屬性比改變bold的屬性更有意義。因為bold只是making bold，并不做任何重點性強調性的區分。

參考資料：

理解HTML語義化

HTML語義化

HTML5的革新——語義化標簽

HTML element reference

HTML語義化標簽探析