HTML語義化

近來看面試題的時候，常常看到一個問題：HTML語義化是什麼意思？
w3school裏面有html標籤的含義。然而HTML5中對一些標籤進行了修改，因爲不瞭解H5的新定義，就很容易弄錯標籤之間的意思。例如：既然i標籤是指斜體的意思，那麼爲何font-awesome這類字體要用i標籤呢？這不是反語義化了嗎？除此以外，em和strong都是有強調的意思，又有什麼區別呢？可能這個時候又會有人說，我用div+span+css就能夠實現一樣的頁面效果，爲何非得用什麼語義化的<artical>,<ul>來表示呢？
問題不少，咱們一個一個來看。
【均爲學習過程當中的我的理解，可能有誤。如有誤解請指出，謝謝！】

HTML語義化是什麼？

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

爲何要語義化？

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

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

• 方便其餘設備的解析

• 便於團隊開發和維護

易混淆的HTML標籤詳解

• i 標籤

The HTML <i&gt; 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 <em&gt; marks text that has stress emphasis. The <em&gt; element can be nested, with each level of nesting indicating a greater degree of emphasis.

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

• strong標籤

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

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

• b標籤

The HTML <b&gt; 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標籤來標記標題，標題使用<h1>~<h6>標籤。並且，當它們沒有必要顯示爲粗體時，樣式表能夠改變這些元素的默認樣式。
爲了傳達更多的語義信息，能夠給b元素添加class屬性，例如 b class ="lead"來標記每一個段落的第一個句子。
若是沒有語義上的目的，使用css屬性的font-weight:bold來讓文本加粗會更好。

• mark

The HTML Mark Element (<mark>) 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>表現爲高亮文本。例如咱們在網頁上查找關鍵字時，找到的結果就會以高亮的形式展示。

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

HTML5新標籤

• section

表示文檔中的一個區域（或節），好比，內容中的一個專題組，通常來講會有包含一個標題（heading）。通常經過是否包含一個標題 (<h1>-<h6> element) 做爲子節點來辨識每個<section>。通常來講，一個 <section> 應該出如今文檔大綱中。

• artical

<article>元素表示文檔、頁面、應用或網站中的獨立結構，其意在成爲可獨立分配的或可複用的結構，如在發佈中，它多是論壇帖子、雜誌或新聞文章、博客、用戶提交的評論、交互式組件，或者其餘獨立的內容項目。

不一樣標籤的區別

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，並不作任何重點性強調性的區分。

參考資料：

1. 理解HTML語義化

2. HTML語義化

3. HTML5的革新——語義化標籤

4. HTML element reference

5. HTML語義化標籤探析