摘要：近來看面試題的時(shí)候，經(jīng)?？吹揭粋€(gè)問題語義化是什么意思里面有標(biāo)簽的含義。因?yàn)槎弑硎镜暮x不同。參考資料理解語義化語義化的革新語義化標(biāo)簽語義化標(biāo)簽探析

近來看面試題的時(shí)候，經(jīng)常看到一個(gè)問題：HTML語義化是什么意思？
w3school里面有html標(biāo)簽的含義。然而HTML5中對(duì)一些標(biāo)簽進(jìn)行了修改，由于不了解H5的新定義，就很容易弄錯(cuò)標(biāo)簽之間的意思。例如：既然i標(biāo)簽是指斜體的意思，那么為什么font-awesome這類字體要用i標(biāo)簽?zāi)兀窟@不是反語義化了嗎？除此之外，em和strong都是有強(qiáng)調(diào)的意思，又有什么區(qū)別呢？可能這個(gè)時(shí)候又會(huì)有人說，我用div+span+css就可以實(shí)現(xiàn)同樣的頁面效果，為什么非得用什么語義化的,

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

語義化是指根據(jù)內(nèi)容的結(jié)構(gòu)化（內(nèi)容語義化），選擇合適的標(biāo)簽（代碼語義化），便于開發(fā)者閱讀和寫出更優(yōu)雅的代碼的同時(shí)，讓瀏覽器的爬蟲和機(jī)器很好的解析。

為什么要語義化？

有利于SEO，有助于爬蟲抓取更多的有效信息，爬蟲是依賴于標(biāo)簽來確定上下文和各個(gè)關(guān)鍵字的權(quán)重。

語義化的HTML在沒有CSS的情況下也能呈現(xiàn)較好的內(nèi)容結(jié)構(gòu)與代碼結(jié)構(gòu)

方便其他設(shè)備的解析

便于團(tuán)隊(duì)開發(fā)和維護(hù)

易混淆的HTML標(biāo)簽詳解

i 標(biāo)簽

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標(biāo)簽效果，i標(biāo)簽通常表示因?yàn)槟撤N原因和正常文本不同的文本，例如專業(yè)術(shù)語、外語短語或排版用的文字。通常表現(xiàn)為斜體。

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

em 標(biāo)簽

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標(biāo)簽效果。em表示強(qiáng)調(diào)的文本。視覺上也是斜體的效果

strong標(biāo)簽

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

strong標(biāo)簽效果。以加粗的形式展現(xiàn)。表示這個(gè)文本的重要性，在HTML4中表示特別強(qiáng)調(diào)，HTML5中描述為“strong importance for its contents”

b標(biāo)簽

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標(biāo)簽效果。表示的文本風(fēng)格不同于正常的文本，沒有表達(dá)任何特殊的重要性和相關(guān)性。通常用于關(guān)鍵字回顧，回顧中的產(chǎn)品名稱或者是其他需要表現(xiàn)為粗體的文本。另一個(gè)例子是標(biāo)志每個(gè)段落的lead sentence。

在HTML4之前b元素是為了使文本變?yōu)楹隗w，HTML4后樣式信息已經(jīng)被棄用，所以b元素的意義已經(jīng)更改了。
不要使用b標(biāo)簽來標(biāo)記標(biāo)題，標(biāo)題使用

~

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

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的效果如下圖。表現(xiàn)為高亮文本。例如我們在網(wǎng)頁上查找關(guān)鍵字時(shí)，找到的結(jié)果就會(huì)以高亮的形式展現(xiàn)。

不要使用mark元素來實(shí)現(xiàn)語法高亮，而是用span元素。
mark元素通常是表示跨越不同的上下文中的相關(guān)文本。

HTML5新標(biāo)簽

section

表示文檔中的一個(gè)區(qū)域（或節(jié)），比如，內(nèi)容中的一個(gè)專題組，一般來說會(huì)有包含一個(gè)標(biāo)題（heading）。一般通過是否包含一個(gè)標(biāo)題 (
-
 element) 作為子節(jié)點(diǎn)來辨識(shí)每一個(gè)
。一般來說，一個(gè) 
 應(yīng)該出現(xiàn)在文檔大綱中。

artical

元素表示文檔、頁面、應(yīng)用或網(wǎng)站中的獨(dú)立結(jié)構(gòu)，其意在成為可獨(dú)立分配的或可復(fù)用的結(jié)構(gòu)，如在發(fā)布中，它可能是論壇帖子、雜志或新聞文章、博客、用戶提交的評(píng)論、交互式組件，或者其他獨(dú)立的內(nèi)容項(xiàng)目。

不同標(biāo)簽的區(qū)別 em vs i

雖然em標(biāo)簽也是顯示為斜體的效果，但不能說因?yàn)樾Ч粯泳褪褂胕標(biāo)簽來代替em標(biāo)簽。因?yàn)槎弑硎镜暮x不同。
舉個(gè)例子。em標(biāo)簽：just do it already!
那么一個(gè)人或者一個(gè)軟件在讀這句話時(shí)，就會(huì)以強(qiáng)調(diào)加重的語氣來讀do這個(gè)單詞。
對(duì)于i標(biāo)簽：The word the is an article。那么在這句話中斜體并沒有強(qiáng)調(diào)的語氣。只是表明the是一個(gè)article，而不是我們平時(shí)的冠詞。

em vs strong

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

strong vs b

strong 和 b 算是最相似的兩個(gè)元素了。那么二者之間的差別。strong表示的是一種邏輯狀態(tài)，而bold表示的是物理狀態(tài)。邏輯狀態(tài)是從內(nèi)容中分離出來，以各種不同的形式來展現(xiàn)，可能你想標(biāo)記為紅色或者下劃線或者其他，那么改變strong的屬性比改變bold的屬性更有意義。因?yàn)閎old只是making bold，并不做任何重點(diǎn)性強(qiáng)調(diào)性的區(qū)分。

參考資料：

理解HTML語義化

HTML語義化

HTML5的革新——語義化標(biāo)簽

HTML element reference

HTML語義化標(biāo)簽探析